A simple example of CSS sprites

A CSS sprite is really a technique rather than a unique object in the same way that DHTML is simply the technique of using JavaScript to manipulate the DOM.

So what exactly is a CSS sprite? Well, the sprite is a normal web-compatible image (e.g. JPEG, PNG or GIF) which contains several (or even all) CSS-applied background images for elements on your web page. The idea being that you can write your CSS classes in such a way that you define the width and height of your elements and position the CSS sprite image in so as to display only the relevant portion of the CSS sprite image as the element background.

As an example of CSS sprites, let’s create a graphical menu (one of my pet hates but a love of many designers I work with). We will create the menu using a <ul> (unordered list) with child <li> elements, each containing an anchor (<a>) element which in turn contains a <span> element. We will make each <li> list item float up next to it’s siblings, hide the text inside the <span> element, set the dimensions of the <li> element appropriately so that only the portion of the sprite image to be used as the background-image for that element is shown then set a :hover pseudo class on the <a> as a hover/rollover state. All graphics for the menu will come from a single image, the sprite image which for our example looks like this:

The HTML markup we’ll use looks like this:

<ul>
    <li><a href="#"><span>Home</span></a></li>
    <li><a href="#"><span>About us</span></a></li>
    <li><a href="#"><span>Products</span></a></li>
    <li><a href="#"><span>Contact us</span></a></li>
</ul>

Your CSS could then be something like this:

/ menu main styles /
ul.main_menu
{
    float:left;
    width:100%;
    padding:0;
    margin:0;
    list-style-type:none; / remove list item marker disc /
}
ul.main_menu li
{
    float:left; / make each list item float next to it's siblings /
    padding:0;
    margin:0;
    height:50px; / assign the same height to all list items /
}
ul.main_menu li a
{
    / make the anchor elements display as block so we can 
    reliably set dimensions on them and remove default styles /
    float:left;
    display:block;
    padding:0;
    margin:0;
    width:100%;
    height:100%;
}
ul.main_menu li a span
{
    / hide the text for each list item as our graphics will be replacing them /
    / this technique (unlike display:none) won't hide the text from screenreaders /
    position:absolute;
    left:-90000px;
}

/ individual menu items /
ul.main_menu li.menu_item_home
{
    width:70px;
    background:url('/experiments/css-sprites/css-sprites-menu.jpg') 0 0;
}
ul.main_menu li.menu_item_home a:hover
{
    background:url('/experiments/css-sprites/css-sprites-menu.jpg') 0 52px;
}

ul.main_menu li.menu_item_about_us
{
    width:104px;
    background:url('/experiments/css-sprites/css-sprites-menu.jpg') -70px 0;
}
ul.main_menu li.menu_item_about_us a:hover
{
    background:url('/experiments/css-sprites/css-sprites-menu.jpg') -70px 52px;
}

ul.main_menu li.menu_item_products
{
    width:96px;
    background:url('/experiments/css-sprites/css-sprites-menu.jpg') -174px 0;
}
ul.main_menu li.menu_item_products a:hover
{
    background:url('/experiments/css-sprites/css-sprites-menu.jpg') -174px 52px;
}

ul.main_menu li.menu_item_contact_us
{
    width:105px;
    background:url('/experiments/css-sprites/css-sprites-menu.jpg') -270px 0;
}
ul.main_menu li.menu_item_contact_us a:hover
{
    background:url('/experiments/css-sprites/css-sprites-menu.jpg') -270px 52px;
}

Note the negative “x” positioning of the sprite image – this is because we want to offset the position of the sprite image to the left so that we display the correct portion of the sprite image as the background of our <li> element.

We apply the :hover pseudo class to the anchor (<a>) element rather than the <li> since earlier versions of Internet Explorer don’t apply the :hover pseudo class on any other elements than <a>’s.

You can see a working example of CSS sprites using the image, HTML and CSS above here.

The key benefits of CSS sprites are:

• Reduced number of HTTP requests which reduces page load times (because each HTTP request has a latency while the request is established then fulfilled)
• Reduction/removal of that nasty “flicker” which can occur when the browser downloads a new image for the :hover pseudo class of the <a> element
• Less files cluttering up the Web Server

The down side to CSS sprites are:

• A slight increase in complexity in CSS
• More time required by the designer to create the sprite image(s)
• If an element needs to be added or amended, the whole sprite may need to be re-edited an uploaded
• If a graphical element is removed, this may cause extra work in amending the sprite and CSS positioning accordingly

CSS sprites are not necessarily appropriate for every website but they certainly can be a big benefit it the right circumstances. If your website is used by a lot of mobile or dial-up users or is very popular, you may well want to consider CSS sprites perhaps alongside CSS and JavaScript minification – these methods could drastically reduce the number of HTTP requests made by your website which will be a big benefit for users of slower connections.