What's this negative value in this CSS property ?

Question

background-position: -200px 0;

one site says it crops an image from the bottom and displays the rest part ..another site is saying its shifting the image to the left..what exactly does it do ?

I am trying to implement CSS Sprites..having problem due to this positioning thingy...this is what I have implemented so far...its not working right..I have few links and I want a diff part of the image to be displayed when mouse is moved over a particular link...I am geting output as the whole image being displayed..it wont even crop it..I tried so many things like changing positioning, adding divs..what not..now I am so lost , I dont even know where I began..Could someone plz point out what am I doing wrong here ? Why is the image not getting cropped..sure something is wrong with this positioning X,Y values.... here's the code:-

<style type="text/css">
#sprite ul{background:url(images/image.jpg) no-repeat;
width:728px;height:1225px;display:block}

#ID1{background-position:0 -1000px}
#ID1:hover{background-position:0 -1000px}

#ID2{background-position:0 -1000px}
#ID2:hover{background-position:0-800px}

#ID3{background-position:0 1000px}
#ID3:hover{background-position:0 -600px}

#ID4{background-position:0 1000px}
#ID4:hover{background-position:0 -400px}

#ID5{background-position:0 1000px}
#ID5:hover{background-position:0 -200px}

#ID6{background-position:0 1000px}
#ID6:hover{background-position:0 -200px}
</style>

HTML:-

<div id="sprite">
<ul>
    <li><a href="#" id="ID1">link1</a></li>
    <li><a href="#" id="ID2">link2</a></li>
    <li><a href="#" id="ID3">link3</a></li>
    <li><a href="#" id="ID4">link4</a></li>
    <li><a href="#" id="ID5">link5</a></li>
    <li><a href="#" id="ID6">link6</a></li>
</ul>
</div>

Answer 1

one site says it crops an image from the bottom and displays the rest part ..another site is saying its shifting the image to the left..what exactly does it do ?

If in doubt, trust the specification; horizontal position comes before vertical position.

#sprite ul

If you want to show part of an image as the background to a list item or anchor, then you have to set the background on that element. Here you are just putting the entire image as the background to the list itself, and everything else is placed on top of it.

Instead you need to put a copy of the image on each link.

#ID2:hover{background-position:0-800px}

You need a space between the two values

Answer 2

The background-position property is a composite property of background-position-x and background-position-y, so the first value is the horisontal position and the second value is the vertical position.

The position is the top left corner of the image in relation to the top left corner element, so a negative x value means that the image is placed to the left of the element, in effect cropping the image from left.

(So, the site saying that the image is cropped from the bottom has both the value order and direction mixed up.)

Answer 3

background-position: -157px 0; will shift the image 157 pixels to the left. It will not be cropped.

The main problem from your code is that you are setting the background image on the ul, but then changing the background position on the links. So your background position rules will have no effect as the links don't have a background. You want to instead set the same background image on all of the links, probably with something like:

#sprite ul a {
    background-image: url(images/image.jpg);
    background-repeat: no-repeat;
}

along with some appropriate dimensions, and then take it from there.