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?

possible duplicate of http://stackoverflow.com/questions/5365061/css-sprite-with-negative-background-positions-not-clear — agriboz, Dec 13 '12 at 13:08

feeela · Accepted Answer · 2012-12-13T13:12:53.483

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.

thany you very much @feeela – midstack Dec 13 '12 at 13:50 — midstack, Dec 13 '12 at 13:50

score 0 · Answer 2 · answered Dec 13 '12 at 13:10

Okay, take a div with a background image with a position of 0 0. Adding to it, you move it down and the the right. Subtracting moves it up and to the left. 0 0 is the base to that system.

If that annoys you, you could change the code to this:

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

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

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

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

Css background position coordinates

2 Answers2