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

Question

If I have an image of 1000x3000 pixels and I use a negative background position, how does it work exactly?

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

Answer 1

The background position property actually moves the background image relative to the element. For an instance, if you use {background-position: 0 0} , this means that you are positioning (0,0) , which is at the top left of your image, in the upper left corner of your html element.

-ve left offset means you are moving the image left, and -ve top offset means moving the image up.

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

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

means you move the image 209px to the left and 2px up.

Hope this helps you.

Answer 2

You must interpret the negative signs as:

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