Just Free Templates

CSS sprites provide a neat and easy way to reduce loading times on your page as well as adding rollover effects simply and easily without the use of javascript or worrying about pre-loading images. But what exactly are CSS sprites and how can you make use of them with CSS? Read on for our guide to beginning with CSS sprites in your own designs…

What are CSS sprites?

The first thing to do is to explain exactly what a CSS sprite is, it’s a pretty simple technique: rather than have multiple images stored on their own, you combine all the various images into one big one (the sprite) and simply show the portion of the image you want to using CSS.

But why use them? First of all it can reduce load times significantly, there is after all only a single image to load and that means only a single HTTP request that needs to be made. Furthermore you will find that the resulting combined image is a smaller file size than the sum of the file sizes of each of the files on their own. Finally you can use them to provide some simple rollover effects, something which used to be done using lots of Javascript and multiple images can be accomplished with a single image and a few lines of CSS.

A basic example

A very common and simple use of CSS sprites is to implement a rollover button, for this we use a single image which contains both the “off” and “on” states of the button:

Then we can write the HTML:

<a href="#" class="rollover"><span>Comments</span></a>

Next for the CSS. Firstly, the we use the <span> to hide the text:

a.rollover span {
    display:none;
}

Now we set up the link and use the sprite image as the background. We set the width and height of the button to that of the button on the sprite:

a.rollover {
    background:url('buy-now-sprite.png') no-repeat top left;
    display:block;
    height:51px;
    width:159px;
}

The result looks like this:

Comments

Now to add the hover effect, we simply shift the background position to make the other half of the sprite visible:

a.rollover:hover {
    background-position: 0 -51px;
}

The result looks like this:

Comments

And there you have a very basic use of CSS sprites!

A step further

This technique can be expanded from a single button to whole elements on your webpage’s such as navigation bars, a sprite like this for example can be used to provide mouseover effects on multiple buttons from a single image:

A working example using the above image:

• A
• A
• A
• A
• A

The HTML used to implement such a navigation bar may look something like this:

<ul class="rollover-ex">
    <li><a href="#"><span>A</span></a></li>
    <li class="button2"><a href="#"><span>B</span></a></li>
    <li class="button3"><a href="#"><span>C</span></a></li>
    <li class="button4"><a href="#"><span>D</span></a></li>
    <li class="button5"><a href="#"><span>E</span></a></li>
</ul>

With the CSS that displays the correct portion of the image looking like this:

ul.rollover-ex li a { 
    display: block; 
    background: #fff url('navigation-sprite.jpg') no-repeat scroll top left; 
    height: 51px; 
    width: 44px; 
}
 
ul.rollover-ex li a span { display: none; }
 
ul.rollover-ex li.button2 a { background-position: -45px 0; }
ul.rollover-ex li.button3 a { background-position: -90px 0; } 
ul.rollover-ex li.button4 a { background-position: -135px 0; }
ul.rollover-ex li.button5 a { background-position: -180px 0; }
 
ul.rollover-ex li a:hover { background-position: 0px -51px; }
ul.rollover-ex li.button2 a:hover { background-position: -45px -51px; }
ul.rollover-ex li.button3 a:hover { background-position: -90px -51px; } 
ul.rollover-ex li.button4 a:hover { background-position: -135px -51px; }
ul.rollover-ex li.button5 a:hover { background-position: -180px -51px; }

Why stop there?

CSS sprites can be used to combine unlimited images into one, it’s therefore more than possible to have only a single image for your whole design and then simply use the background-position property to only show the required part. Unfortunately there is one thing CSS sprites can’t do and that’s repeating backgrounds, so you will only be able to combined block images such as icons and buttons.

Below is a portion of the current sprite image used by YouTube, showing all the various icons combined together.

Further reading

• More CSS sprite examples and techniques
• SpriteMe – Sprite image and CSS bookmarklet
• Online sprite generator