CSS Sprites for img tags?

Been reading more and more about css sprites and all the examples I’ve seen are used more times then not with unordered lists. I’m wondering would css sprites be usable with img tags?

I’m thinking with the benefits of using sprites that images on my forum such as new posts, no-new posts, goto last post, etc images would be great to put into a sprite. However, most if not all of these images on the forum are just images, no links to anything. Is it possible to use this type of method with regular img tags?

Not really.

The trick with CSS Sprites is that you have an area of fixed size, and then a sprite set as a background and moved into place using positioning so that just one sprite is displayed.

However, in a forum, it would actually make semantic sense for each topic to be in an unordered list, instead of just divs or whatever with images, and then you can use sprites in that case. However, you then lose the alt tag attribute ability… so, it’s a trade-off.

Possible you could save markup using span backgrounds instead of images. :slight_smile:

25 of


<a href="showthread.php?p=3797122#post3797122"><img class="inlineimg" src="http://sitepointstatic.com/forums/images/buttons/lastpost.gif" alt="Go to last post" border="0" /></a>

or 25 of


<a href="showthread.php?p=3797122#post3797122"><span class="lastpost" title="Go to last post"></span></a>

and 1 of


.lastpost {
    background: url("http://sitepointstatic.com/forums/images/buttons/lastpost.gif");
    float: right;
    width: 16px;
    height: 16px;
}