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
Post a Comment