html - Use sprite image for list -

i struggling bit here: http://jsfiddle.net/spadez/jbue6/27/

i trying have vertical list each list item has it's own icon, loaded in single sprite. seem have got of way image displayed in background.

how crop sprite image show correctly, , how offset them show different images?

html

<ul>     <li class="navimg" id="user"><a href="url">user</a></li>     <li class="navimg" id="vacancy"><a href="url">vacancies</a></li>     <li class="navimg" id="company"><a href="url">company</a></li> </ul> 

css

.navimg { background:url('http://www.otlayi.com/web_images/content/free-doc-type-sprite-icons.jpg'); } #user { left:30px } #vacancies { left:60px } #company { left:90px } 

any appreciated.

take @ this.

http://jsfiddle.net/itsakt/v6ewj/1/

html

<ul>   <li>     <i class="navimg" id="user"></i>     <a href="url">user</a>   </li>   <li>     <i class="navimg" id="vacancy"></i>     <a href="url">vacancies</a>   </li>   <li>     <i class="navimg" id="company"></i>     <a href="url">company</a>   </li> </ul> 

css

.navimg {     background:url('http://www.otlayi.com/web_images/content/free-doc-type-sprite-icons.jpg');      display:inline-block;     width:20px;     height:20px; }  #user {     background-position:-10px -10px; }  #vacancy {      background-position:-50px -10px; }  #company {      background-position:-50px -40px; } 

i have changed html , css mentioned in question.