CSS Sprites

Though I had read a few articles and understood the concept, I hadn't yet implemented them. What are CSS Sprites? The idea is borrowed from 2-d video games where individual graphic elements were mapped on a single grid. For the web it means reducing the number of http requests for individual images by using a single image and positioning the background with CSS. This particularly useful for large, high traffic websites in reducing calls to the server.

CSS Sprites Example 1: Text Link with Rollover Image

It's often best to start out with a simple implementation of a concept - what you learn often pays off when moving on to something more complicated. This is a two-state rollover for a text link done with a single image file that could be useful for tabbed navigation, etc.

Single Image for Sprite Rollover Example Link

And what did I learn? For one thing that it's better to spend some time in Photoshop preparing the image file. In this case I jockeyed the hover state layer group to exactly 50 pixels from the top before saving for web. This simplifies the CSS for background positioning. I only needed to specify -50px for the a:hover background-position rather than attempt to adjust it in the CSS.

CSS Sprites Example 2: Text Links with Multiple Icon Rollovers

The Widgets menu to the left utilizes the image below right for the backgrounds for both normal and hover states for the icons.

Here is the HTML Markup:

<ul id="sptwo">
<li><a class="red" href="#">Red Widgets</a></li>
<li><a class="blue" href="#">Blue Widgets</a></li>
<li><a class="green" href="#">Green Widgets</a></li>
</ul>

The beauty of CSS Sprites is that they require HTML/CSS that is less complicated than swapping individual background images. Once the default styles are defined for all a elements that are children of ul#sptwo li then it requires only setting the background-position (and color, if desired).

I found that time spent in preparing the sprite image in Photoshop was definitely worthwhile and saved time when writing the CSS. Here is how I proceeded:

Multiple Icons with Hovers Sprite Image
  • I created an icon .psd exactly 50 pixels by 50 pixels with desired background color. Each icon normal & hover state was placed in a separate layer.
  • Since each of six icons is 50 x 50 pixels, I made a "base" .psd 50 pixels by 300 pixels. I used a contrasting background color for this .psd.
  • Each icon layer was dragged onto the base .psd and precisely positioned, helped by the contrasting background color. With each layer in place the file was saved for the web.
  • Since I knew the dimensions of each layer I knew the negative top positioning required for each background. For example:
  • ul#sptwo li a.blue {
    background-position: 0px -100px;
    color: #00f;
    }

    ul#sptwo li a.blue:hover {
    background-position: 0px -151px;
    }

CSS Sprites Example 3: Floated Icons with Rollover

Not to dwell on image production in Photoshop, I experimented a bit more with CSS for this example. The sprites in the first horzontal box are floated within a parent div. Each is assigned a class for which attributes can be changed based on the parent div - or the parent div's attributes can differ.

Here the links are contained within a div that has a width set to 150 pixels. They are assigned different margins than those in the horizontal div though they share the same classes. This approach would be useful where icons are displayed differently in different sections of the page.

Inheritance has been utilized in this case to set the styles for links within divs with the classes spthree and spfour:

div.spthree a, div.spfour a {
background: #f6f6e1 url(/images/sprite3.gif) 0px 0px no-repeat;
display: block;
float: left;
width: 25px;
height: 25px;
padding: 0;
margin: 0 5px 0 5px;
}

Since all links in these divs will inherit those attributes, styling the individual link classes is a relatively simple matter. Here's the CSS for the class cookie

div.spthree a.cookie, div.spfour a.cookie {
background-position: -176px 0px;
}

div.spthree a.cookie:hover, div.spfour a.cookie:hover {
background-position: -176px -26px;
}

Finally, here is the one image that provides the backgrounds for the links in their normal & hover states:

Multiple Floated Icons with Hovers Sprite Image

HTTP requests reduced from 20 to 1.

That concludes this round of experimentation with CSS Sprites. Next I plan to combine the three images used for the sprites on this page into a single image. This page is not meant as a tutorial - more toward providing examples; The CSS is in the head of the page and is commmented so you can View Source and check it out. Feel free to contact me with any questions or comments!

© 2000 - 2009 Ed , EJH Web