The Examples


I've put together two very similar web pages to demonstrate CSS Sprites in action. In the examples I create a navigation bar using the sprite you saw on the previous page. The first example uses "div"s and the second example creates an identical navigation but with lists. Both examples were tested on Firefox 2 / 3.0.4, Opera 9.27, Google Chrome 0.3.154.9, Internet Explorer 6 / 7, Safari Win32 3.03, Avant 11.5 and AOL Explorer 1.5.

You can download the examples from the link above.

Core Markup and CSS


Both examples start off with the following "almost identical" XHTML documents and style sheets. This code creates the basic web page structure and applies some styling that includes using the sprite as the body background image.

Example 1, divs

  1. <!-- EXAMPLE 1: DIVS; XHTML -->
  2.  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  4. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  5. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  6.  
  7. <head>
  8.     <title>Optimize Your Web Site by Using CSS Image Sprites, Example 1</title>
  9.     <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  10.     <meta http-equiv="content-style-type" content="text/css" />
  11.     <link rel="stylesheet" type="text/css" href="styles1.css" />
  12. </head>
  13.  
  14. <body>
  15. <div class="container">
  16.     <div class="head">
  17.         <a href="index1.html"><img src="logo.gif" alt="CSS Sprites" title="" /></a>
  18.     </div>
  19.     <!-- div based navigation goes here -->
  20.     <div class="content">
  21.         <h1>Example 1: <span>using divs</span></h1>
  22.     </div>
  23. </div>
  24. </body>
  25.  
  26. </html>

  1. /* EXAMPLE 1: DIVS; CSS */
  2.  
  3. html { font-family:arial, helvetica, sans-serif }
  4. body {
  5.     height:100%; margin:0 auto; text-align:center;
  6.     background:#111 url('the_sprite.gif') repeat-x 0 -96px;
  7.     font:62.5% arial, helvetica, sans-serif; font-style:normal;
  8.     font-weight:normal; color:#ccc
  9. }
  10. div, span, img, a {
  11.     margin:0; padding:0; border:none; font-family:arial, helvetica, sans-serif
  12. }
  13. a { font-size:1.2em; text-decoration:none; color:#ccc }
  14. a:hover { color:#ddd }
  15. .left { float:left } .right { float:right } .inline { display:inline }
  16. div.container {
  17.     min-width:800px; max-width:1000px; margin:0 auto; text-align:left
  18. }
  19. div.head { height:79px }
  20. /*
  21.     adding display block to the logo <img> prevents ie6 and similar
  22.     browsers from putting unwanted space below the logo which messes
  23.     up the alignment of the body background image and the nav divs
  24. */
  25. div.head img { display:block }
  26. div.nav { height:47px; margin:0 10px 0 10px }
  27. div.content { clear:both; margin:0 10px 0 10px; padding:10px }
  28. h1 { font-size:2em; font-weight:normal; color:#ff0000 }
  29. h1 span { color:#aaa }


Example 2, lists

  1. <!-- EXAMPLE 2: LISTS; XHTML -->
  2.  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  4. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  5. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  6.  
  7. <head>
  8.     <title>Optimize Your Web Site by Using CSS Image Sprites, Example 2</title>
  9.     <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  10.     <meta http-equiv="content-style-type" content="text/css" />
  11.     <link rel="stylesheet" type="text/css" href="styles2.css" />
  12. </head>
  13.  
  14. <body>
  15. <div class="container">
  16.     <div class="head">
  17.         <a href="index2.html"><img src="logo.gif" alt="CSS Sprites" title="" /></a>
  18.     </div>
  19.     <!-- lists based navigation goes here -->
  20.     <div class="content">
  21.         <h1>Example 2: <span>using lists</span></h1>
  22.     </div>
  23. </div>
  24. </body>
  25.  
  26. </html>

  1. /* EXAMPLE 2: LISTS; CSS */
  2.  
  3. html { font-family:arial, helvetica, sans-serif }
  4. body {
  5.     height:100%; margin:0 auto; text-align:center;
  6.     background:#111 url('the_sprite.gif') repeat-x 0 -96px;
  7.     font:62.5% arial, helvetica, sans-serif; font-style:normal;
  8.     font-weight:normal; color:#ccc
  9. }
  10. div, span, img, a, ul, li {
  11.     margin:0; padding:0; border:none; font-family:arial, helvetica, sans-serif
  12. }
  13. a { font-size:1.2em; text-decoration:none; color:#ccc }
  14. a:hover { color:#ddd }
  15. .left { float:left } .right { float:right }
  16. div.container {
  17.     min-width:800px; max-width:1000px; margin:0 auto; text-align:left
  18. }
  19. div.head { height:79px }
  20. /*
  21.     adding display block to the logo <img> prevents ie6 and similar
  22.     browsers from putting unwanted space below the logo which messes
  23.     up the alignment of the body background image and the nav divs
  24. */
  25. div.head img { display:block }
  26. div.nav { height:47px; margin:0 10px 0 10px }
  27. div.content { clear:both; margin:0 10px 0 10px; padding:10px }
  28. h1 { font-size:2em; font-weight:normal; color:#ff0000 }
  29. h1 span { color:#aaa }


Example 1: using all div tags


Here is the navigation markup for the "all div" example. The buttons have hover states and are aligned on both the left and right sides of the navigation bar.

  1. <div class="nav right inline">
  2.     <div class="btn"><a href="index1.html" class="btnLink">Example 1</a></div>
  3.     <div class="btn"><a href="index2.html" class="btnLink">Example 2</a></div>
  4. </div>
  5. <div class="nav">
  6.     <div class="btn"><a href="index1.html" class="btnLink">Tips</a></div>
  7.     <div class="btn"><a href="index1.html" class="btnLink">Tricks</a></div>
  8.     <div class="btn"><a href="index1.html" class="btnLink">Misc</a></div>
  9. </div>


The nav class specifies the height of the navigation bar (47px) and assigns a left and right side margin of 10px. The right class is used to float a block of buttons to the right and the inline class is used to resolve the widely publicized IE 6 float/margin bug.

The btn class specifies the width/height of each button, floats left, uses the sprite as the background image, sets a small right margin and center aligns the text.

Browser Note 1

Modern browsers support CSS :hover on just about everything but IE 6 and similar browsers only support it on anchors. If you added a div.btn:hover class to adjust the background image coordinates of the sprite during hovers it would only work on modern browsers.

This means if you want your button hover state graphics to work on older browsers the background image has to be applied to anchors.

Browser Note 2

Image based CSS navigations tend to "flicker" on IE 6 and similar browsers. The background image applied to the anchors will disappear during a hover and then reappear with the new coordinates.

One way to resolve this issue is by assigning your background image to the container element as well as the anchors. In the case of this example div.btn is the container.

If you add the sprite to the container with the coordinates of the hover state the flicker will appear to go away because while the browser is updating the background of the anchor (and hiding it) the container background image will still be shown.

The btnLink class sets the width, height, background image, font weight and line height for the anchors. A block display is also used so the anchors expand to the correct width and height.

Here is the rest of the CSS for example 1.

  1. /* Styles for using all "div"s */
  2. div.btn {
  3.     width:100px; height:47px; float:left; margin-right:3px;
  4.     background:url('the_sprite.gif') no-repeat 0 -48px;
  5.     text-align:center
  6. }
  7. div.btn a.btnLink, div.btn a.btnLink:hover {
  8.     width:100px; height:47px; display:block; font-weight:bold;
  9.     line-height:3em; background:url('the_sprite.gif') no-repeat 0 0
  10. }
  11. div.btn a.btnLink:hover { background-position:0 -48px }


Example 2: using lists


The browser notes we just discussed in the "all div" example also apply when using lists. In the case of lists the container element is the <li> tag.

Here is the markup and CSS for an identical navigation that uses lists.

  1. <div class="nav">
  2.     <ul class="nav right">
  3.         <li><a href="index1.html">Example 1</a></li>
  4.         <li><a href="index2.html">Example 2</a></li>
  5.     </ul>
  6.     <ul class="nav">
  7.         <li><a href="index2.html">Tips</a></li>
  8.         <li><a href="index2.html">Tricks</a></li>
  9.         <li><a href="index2.html">Misc</a></li>
  10.     </ul>
  11. </div>

  1. /* Styles for using lists */
  2. ul.nav { height:47px; list-style:none }
  3. ul.nav li {
  4.     width:100px; height:47px; float:left; display:block;
  5.     margin-right:3px; line-height:3.6em; font-weight:bold;
  6.     background:url('the_sprite.gif') 0 -48px
  7. }
  8. ul.nav li a {
  9.     width:100px; height:47px; display:block; text-align:center;
  10.     background:url('the_sprite.gif') 0 0
  11. }
  12. ul.nav li a:hover { background-position:0 -48px }


Additional Resources