Background size using css with sprites

Question

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

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

How to do this with css?

Answer 1

You can set the background image size in CSS3, for example background-size: 32px 32px; but in reality it is not compatible with cross browser and I think this is what bothers you.

If the sprite does not have sufficient length and vertical, my recommendation would be to use a little extra markup. For example, use markup like

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

and create a span element with the appropriate sprite of height and background image. Using this method, your li elements can be of any height, and only the corresponding icon will be displayed, despite the fact that your sprite is tightly packed.

Answer 2

For images that support text — for example, lists with icons — you'd better use CSS: before or: after pseudo-elements. This makes your HTML clean.

 <ul> <li>List Item</li> <li>List Item</li> </ul> li:before { content: ""; width: 1em; height: 1em; background: url("image.png") -12px -12px no-repeat transparent; display: inline-block; } 

For more information about this method, go to http://css-tricks.com/ .

Answer 3

You need to set the height. background-repeat LI as well as indentation.

Here is a handy tutorial: preview.moveable.com/JM/ilovelists

Answer 4

Here is an example. Swap place your sprite on a light gray area: http://jsfiddle.net/Pf7Xs/

Is that what you asked? Having the sprite area and text inside the <li> the same size?

Basically you will use line-height and height to line up what you want. hope this helps.