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 also use

li:before {     background:url(..) no-repeat -##px -##px;     width:##px;     height:##px;     display:block;     position:absolute;     content: " ";     top:##px;     left:##px; } 

and thus get an additional element added to the DOM and give that the background image.

Answer 2

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.