High Performance Web Sites

CSS Sprites

Like image maps, CSS sprites allow you to combine images, but they're much more flexible. The concept reminds me of a Ouija board, where the planchette (the viewer that all participants hold on to) moves around the board stopping over different letters. To use CSS sprites, multiple images are combined into a single image, similar to the one shown in Figure 3-2. This is the "Ouija board."

Figure 3-2. CSS sprites combine multiple images into a single image

The "planchette" is any HTML element that supports background images, such as a SPAN or DIV. The HTML element is positioned over the desired part of the background image using the CSS background-position property. For example, you can use the "My" icon for an element's background image as follows:

<div style="background-image: url('a_lot_of_sprites.gif');
             background-position: −260px −90px;
             width: 26px; height: 24px;">
</div>

I modified the previous image map example to use CSS sprites. The five links are contained in a DIV named navbar. Each link is wrapped around a SPAN that uses a single background image, spritebg.gif, as defined in the #navbar span rule. Each SPAN has a different class that specifies the offset into the CSS sprite using the background-position property:

<style> #navbar span { width:31px; height:31px; display:inline; float:left; background-image:url(/images/spritebg.gif); } .home { background-position:0 ...