Css background position coordinates

Question

I want to make css sprite with this image

My html codes;

<div class="top"></div>
<div class="bottom"></div>
<div class="right"></div>
<div class="left"></div>

And css codes;

.left{
background : url(arrw.png) no-repeat 0 0;
width:12px;
height:19px;
}

.right{
background : url(arrw.png) no-repeat -29px 0;
width:12px;
height:19px;
}

.top{
background : url(arrw.png) no-repeat -12px 0;
width:16px;
height:12px;
}

.bottom{
background : url(arrw.png) no-repeat -12px -12px;
width:16px;
height:12px;
}

That work perfect but I don't understand why give negative values for background position. Isn't that coordinates system and Don't we be necessary give positive values for this? Position values start 0 0 (left top) and must takes positive values isn't it?What is wrong?

Answer 1

The sprite images you are using, are normally bigger than the box in which you display them. If just include an image it would get positioned to the top left. Now if you want to show the parts of the image that overflow to the right of the box, you'll need to move the image to the left. But as the image is already at left: 0; by default, you need to set negative values to move it even further to the left.

Think about two sheets of paper, one with a hole in it and the other getting moved around behind the first. To see a part of the rear sheet that is on it's right bottom, you need to move to to the top left. So position directions are reversed to the direction you want to move the rear sheet when seeing it through a hole/displaying an image in a box.