Skip to Main Content
High Performance Web Sites
book

High Performance Web Sites

by Steve Souders
September 2007
Intermediate to advanced content levelIntermediate to advanced
170 pages
4h 24m
English
O'Reilly Media, Inc.
Content preview from 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."

CSS sprites combine multiple images into a single image

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 0; ...
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Start your free trial

You might also like

Even Faster Web Sites

Even Faster Web Sites

Steve Souders
Back-end Performance

Back-end Performance

Bruno Skvorc, Christopher Pitt, Tonino Jankov, Reza Lavaryan, Daniel Berman

Publisher Resources

ISBN: 9780596529307Errata Page