Welcome to another article on Building Better Web Pages. This article series comprehensively covers building an HTML document: easily learned, but rarely perfected.

Today’s article covers CSS Sprites. This also means that it covers Javascript preload images, rollover images, hover images, and the old rookie question of, “why do my images blink when I hover over them?” The goal of this article, other than helping you build better web pages, is to catch search engine queries in the preceding sentence and help steer those people in the correct direction. We won’t try to reinvent the wheel with this article, seeing as how this topic has been well detailed for years by bloggers like Dave Shea and Petr Stanicek (A List Apart and Wellstyled.com, respectively).

Solid Statement: Do not use separate images or Javascript for rollover/hover states. Combine them into a single image file side by side and use ‘background’ or ‘background-position’ to get the original or the hover.

Why Do I Need to Use CSS Sprites?

If you found this article because you were searching for “preload images”, “rollover images”, or “blinking images”, you were heading in the wrong direction. Luckily you are here and can learn the simple beauty of CSS Sprites. You should wipe those other thoughts from your mind and never again specify two different images in your CSS file for the same thing.

Quite simply, CSS Sprites are defined as combining 2 or more images in one image file. Your stylesheet can then assign them in the background or background-position property.

 
.submit-button {
   background: url('images/button.jpg') no-repeat;
}
/* THE WRONG WAY */
.submit-button:hover {
    background: url('images/buttonhover.jpg') no-repeat;
}

If you ever used this method (we were all newbies at some point), then this is where you saw your “blinking” image. The first time you hovered over the image, the page had to send a request out to download the hover image. This leaves a short window of waiting while that image is fetched, leaving you with an empty spot for a split second.

Frustrated, you might have then set out on some wild goose chase looking for a way to preload the images. This was done by jumping through hoops with Javascript. While that method solved your blinking problem, it left you still using 2 images and additionally having to parse additional lines of script.

The Solid Solution

CSS Sprites can solve all your woes. There will be no additional HTTP requests needed that will waste time and bandwidth. There will be no related script that needs to run and be maintained in sync with your images. Best of all, there will be no blinking. When will you use them? Any images used in your page that have a hover or active state should be using a CSS sprite, like a button. In theory, you can make a sprite our of any number of images. You could put all your pages images in a single image file and reference them by their coordinates. In practice, though, you should minimize the number of images in one sprite. It becomes a nightmare trying to manage large image maps down the road. Here is an example of a CSS sprite I used to represent a button with 3 states.

CSS Sprite 3 states

Single CSS Sprite

CSS Sprite in action

Sprite In Action

Using an image like this, you simply set the background-position of left, center or right. You can also stack vertically using top/bottom, or specify a pixel position such as 20px 0px (which says 20 to the right and 0 down). I prefer to combine them all in the versatile background property. See the example below.

/* THE CORRECT WAY */
 
.submit-button {
    width: 112px;
    background: url('images/button.jpg') left;
}
.submit-button:hover {
    background: url('images/button.jpg') center;
}
.submit-button:active{
    background: url('images/button.jpg') right;
}

Solid Tip: If you prefer “background,” you must specify the image file for the hover and active pseudo-classes. If you prefer “background-position,” you can simply put “left” or “right.” I prefer background so I can always have the reference to the image its using without hunting down the original.

The CSS above is an elegant and proper way to handle image mouseover (hover) and mousedown (active). It is quick, clean, valid, cross-browser compatible, and easy to implement: all the things a good designer should want. If this article has helped you, let me know. If you already use CSS sprites, I applaud you for reading this far. Be sure to check out the other articles in the series, Building Better Web Pages.

Solid Reading

For building better web pages, any of the following books are a great! “Web Design For Dummies” introduces pretty much every aspect of design, including planning and research. If you are interested more in the concepts and ideas of proper markup, go with “HTML and CSS Web Standards Solutions”. Finally, for a more conversational tone, “Designing with Web Standards” is reading geared toward the practical application, rather than the concepts themselves.