Move the mouse to this area
Hello world!
Hello world!
%
Actually, when using % in background-position, the behavior changes depending on the background-size. As in your example, the background image is smaller than the container it is used in, and an increment in x-axis will make the background move to the right.
However, if you set background-position to a larger size than it’s container, then an increment in x-axis will move it to the left.