background-position: -209px -2px, I don't understand negative background position

Question

If I have a 1000x3000 px image and I use a negative background position, how does this exactly work?

I thought it worked by moving to the left 209 pixels then moving up 2 pixels and then showing the part that actually is left, but it seems to do the opposite of that.

Answer 1

Background position property actually moves the background image itself relative to the element. For the instance if you use {background-position: 0 0} that means you are positioning (0,0) which is top left of your image to the top left of your html element.

The -ve left offset means you are moving the image towards left and the -ve top offset means moving the image upwards..

In above code first 0 refers to left offset and second 0 refers to the top offset..

{background-position: -209px -2px}

means you are moving your image 209px towards left and 2px upwards.

Hope this will help you.

Answer 2

You should interpret the negative signs as:

background-position: -x, -y; is the same as saying... background-position: x pixels left, y pixels up;