Search code examples
cssbackground-imagecss-sprites

Background size with css with sprites

I have a list and each <li> has an icon and a text.

The image of icons is a sprite image, so I need to set the background-size of each li to have the size of an icon.

How can I do this with CSS?

Solution

  • You can set the background image size in CSS3 like background-size: 32px 32px; but that is not really cross-browser compatible and I guess that is what your concern is.

    Unless the sprite is well spaced out and vertical, my recommendation would be to use a bit of extra markup. For example, use markup like 

    <li><span class="ico"></span>This is an li element.</li>

    and style the span element with appropriate height and background image sprite. Using this method, your li elements can have any height and only the appropriate icon would show up, despite how densely packed is your sprite.