What's this negative value in this CSS property? -


background-position: -200px 0;

one site says crops image bottom , displays rest part ..another site saying shifting image left..what ?

i trying implement css sprites..having problem due positioning thingy...this have implemented far...its not working right..i have few links , want diff part of image displayed when mouse moved on particular link...i geting output whole image being displayed..it wont crop it..i tried many things changing positioning, adding divs..what not..now lost , dont know began..could plz point out doing wrong here ? why image not getting cropped..sure wrong positioning x,y values.... here's 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> 

background-position: -157px 0; shift image 157 pixels left. not cropped.

the main problem code setting background image on ul, changing background position on links. background position rules have no effect links don't have background. want instead set same background image on of links, like:

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

along appropriate dimensions, , take there.


Comments

Popular posts from this blog

ASP.NET/SQL find the element ID and update database -

jquery - appear modal windows bottom -

c++ - Compiling static TagLib 1.6.3 libraries for Windows -