use CSS sprites for list (<li>) background image

html css css-sprites
Emmett picture Emmett · Mar 4, 2010 · Viewed 56.3k times · Source

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

designitsimple picture designitsimple · Aug 10, 2011

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.

Related questions

Using sprites with IMG tag?

I understand how to use sprites, however, isn't a "src" attribute required for IMG tags? I could always use a SPAN or other tag and set the background/width/etc but it won't be semantically correct. Basically, I'd like to …

Read More
Why use a sprite sheet rather than individual images?

One thing I have noticed on some sites is that they use one BIIIIIIIG image containing lots of little images, then use CSS background-position to define the coordinates of each image, rather than use individual images. Here's where I'm at: …

Read More
Positioning background image on form element with CSS sprites

I am trying to get a magnifying glass as the background for my input element. The magnifying glass icon is part of a CSS sprite that looks like this: To position it, I've used these properties: #search-form input[type="text"] { …

Read More