How Do I Use CSS Sprites?
One of my favorite ways to learn a CSS trick is to see how good websites do things. So, let us see how Facebook uses CSS sprite on their website. If you're using Safari, launch the Web Inspector from the Develop menu and click on the loupe to inspect an element on the page. On Firefox, you can use Firebug. With the inspector, click on the 'facebook' logo on the top left corner of the page. Looking at the CSS, you will find that the link has a background-image attribute. Copy the link and paste it in a new tab to see how the image is laid out. In case you don't have any inspector installed, here is the path to the image: https://static.ak.fbcdn.net/rsrc.php/zx/r/Pvubnmvx_0f.png
Figure 1. Facebook's Use of CSS Sprite
If you look carefully, you will notice that this image contains bits that appear in the header of the Facebook website. The header is common to all pages, so after the browser has cached this image, it doesn't need to download the image from the server every time the user moves to another page.
The image is extremely simple to create. It is a transparent PNG with multiple sprites pasted on it. Let us now see how this image is used. Every good CSS trick strives to add a layer of visuals on top of a clean block of code, and this technique is no exception.
Here is a simplified version of the markup that is used to generate the header:
And here is the CSS that does the magic:
Don't get overwhelmed with the CSS. There are just a few attributes you need to observe. Let us take the Facebook logo for example. The HTML for it is an H1 tag that contains an anchor. In CSS, we specify the sprite image as its background. The background-position attribute is the one that really does the magic. It allows you to specify the position of the background image. Because we specified the height and width of the element, only that much of the image shows and the rest is hidden away.
That's it. By defining the background image, its position and the dimensions of the element, we can drastically reduce the number of requests made to the server. If you notice in the CSS, we have also used the same technique to implement the rolled over and clicked state of the buttons.
Conclusion
In this article, we saw just a couple uses of CSS sprites, but there are plenty other examples available on the Internet. Most popular websites use this technique for optimizing their pages. Another use of sprites is when you need to made rounded cornered boxes of varied sizes. In the sprite image, you can make a single rounded rectangle and then with some CSS you can reuse that image to have boxes of different sizes.
While this is an extremely useful technique, developers who just discovered it tend to overuse it by bundling all images into one sprite. While this might be the most optimal solution, it may not be the most maintainable one. So remember to use your discretion when adding images to your sprite.
Original: March 14, 2011
Find a programming school near you