Home/ Questions/Q 3216436
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-17T15:17:39+00:00

background-position: -200px 0; one site says it crops an image from the bottom and

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0