What is a CSS Sprite?
The term "CSS sprite" isn't exactly self-explanatory, but it is something every web developer should become acquainted with. A CSS sprite is a method of combining several images into a single image. Below is an example of a CSS sprite:
Why you should use CSS Sprites?
One word explains it all: speed. If the image above was sliced into 6 separate images, your web browser would have to make 6 separate HTTP requests. The more HTTP requests the browser has to make, the slower the website will load. The browser may have to download a larger file, but there is only one round trip to the server for all 6 images. This technique is very useful to load an entire icon set for your website.
Implementation
Now let’s get our hands dirty. We are going to use our sprite from above, an html unordered list for placement, and some simple CSS to move the image around.
The (X)HTML
1: <ul id="menu">
2: <li><a class="cms" href="#">Content Manager</a></li>
3: <li><a class="modules" href="#">Plug-in Modules</a></li>
4: <li><a class="framework" href="#">.Net Framework</a></li>
5: </ul>
By default an unordered list will be displayed vertically, so we want to do some CSS to position them horizontally:
1: #menu{
2: width: 480px;
3: height: 127px;
4: margin: 0px;
5: padding: 0px;
6: list-style: none;
7: }
8:
9: #menu li{
10: width: 160px;
11: height: 127px;
12: float: left;
13: }
The unordered list was set to 480 pixels wide. This is the width of the entire sprite so that all icons will display on the same line. We could have set the unordered list to 320 pixels wide and the 3rd remaining icon would have appeared beneath the first two icons. The list items are set to float:left; this makes the items scroll horizontally instead of vertically or in “block” mode.
Now we will set the CSS that adds the sprite to the background of our hyperlinks:
1: #menu li a{
2: display: block;
3: width: 160px;
4: height: 127px;
5: overflow:hidden;
6: text-indent: -999px;
7: background: url(images/slidebuttongrid.jpg) 0px 0px;
8: }
9:
10: #menu li a.cms{
11: background-position: 0px 0px;
12: }
13:
14: #menu li a.modules{
15: background-position: -160px 0px;
16: }
17:
18: #menu li a.framework{
19: background-position: -320px 0px;
20: }
We have set all the anchors (<a>) for the unordered list with the same properties and background sprite. Then we individually set the background position for each menu item. The negative background position causes the background image to start displaying the background sprite at 160 pixels from the left boundary of the sprite. Since each anchor is set to a fixed width and height only the portion of the sprite we want to display will be shown.
Finally, we want this to be a rollover menu, so we are going to add :hover classes to the anchors:
1: a.cms:hover{
2: background-position: 0px -127px;
3: }
4:
5: a.modules:hover{
6: background-position: -160px -127px;
7: }
8:
9: a.framework:hover{
10: background-position: -320px -127px;
11: }
The End Result