use CSS sprites for list (<li>) 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-repeat top left;}
.sprite-checkmark { background-position: 0 -24px; width: 24px; height: 23px; } 
.sprite-comment { background-position: 0 -48px; width: 14px; height: 14px; }

<div class="sprite sprite-checkmark"></div>

Is it possible to use sprites for the bullets of <li> elements? There are CSS properties called list-style-image, and list-style-position, but I'm not sure how to make it work without the existence of properties like list-style-image-width and list-style-image-height as well.

Thanks.

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

<ul>
   <li class="comment">Test</li>
</ul>

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.