use CSS sprites for list () background image

Question

Is it possible to use CSS sprites for the list background image? Normally, I render my sprites with CSS like this:

.sprite { background: url(sprite.png) no-r         


        

Answer 1

you can use exactly the same method to do CSS sprites on a List. Here's a quick sample:

ul { 
  list-style-type:none;
}

ul li {
  background:url(images/list-image.gif) no-repeat;
  height:24px;
}

ul li.comment {
  background-position: 0 -24px;
  /*Override properties here if you wish */
}

And the html

   
Test

You'll have to remove the default padding/margin with the appropriate CSS styles. Personally i've not seen the list-style-image stuff being used before but know the above is a common solution.