Download the example.

CSS sprites allow you to create a single file that contains all the images laid out in a grid, meaning only a single image and only a single server call, with roughly the same file size because the empty space is compressed. This is generally how it works from an overview:

1. In your file,  place all individual “sprites” that make up your interface separated by enough space that they don’t start running over each other (many people start composing their pieces in Illustrator).
2. Then set the background position (using negative values to move the background up) and include enough space around each sprite so that only it appears in the background of the element, effectively masking the rest of the sprite images.

Getting Started

1. First, we need to start by creating our four different image states, separated by enough space so that even if the links wrap some, we will not see the next button state poking up.
2. Here, I made the buttons a pretty good size and separated them by 100 pixels from the top of one button state to the top of the next state. This is important to remember because that means each button starts 100 pixels after the next, with a 10-pixel margin at the top so that they are a little better centered with the text of the link they will be placed next to.
3. Now it’s time for the code. To begin, let’s set up one link and place it in an unordered list. Look at the bit of code here that’s inside of my .html document:

<br /><ul><br /><%%KEEPWHITESPACE%%> <li><br /><%%KEEPWHITESPACE%%> <a href="#1"><!--my example has no text here--></a><br /><%%KEEPWHITESPACE%%> </li><br /></ul><br />

4. For the CSS, all we’re going to do is change the background-image’s position whenever it’s on a particular link state. In this case, we’re always going to be shifting it vertically 100px either up or down, depending on the condition of the user and the hyperlink. Look at the CSS:

<br />div#right-side a {<br /><%%KEEPWHITESPACE%%>	display: block;<br /><%%KEEPWHITESPACE%%>	width: 132px; /*The size of my background image*/<br /><%%KEEPWHITESPACE%%>	background: url('images/sprite_bg.png') no-repeat left top;<br />}<br /><br />div#right-side a:link {<br /><%%KEEPWHITESPACE%%>	height:100px; /*How far apart I've separated the images in my file*/<br /><%%KEEPWHITESPACE%%>	background-position: left top;<br />}<br /><br />div#right-side a:visited {<br /><%%KEEPWHITESPACE%%>	height:100px; /*How far apart I've separated the images in my file*/<br /><%%KEEPWHITESPACE%%>	background-position: 0px -100px;<br />}<br /><br />div#right-side a:hover {<br /><%%KEEPWHITESPACE%%>	height:100px; /*How far apart I've separated the images in my file*/<br /><%%KEEPWHITESPACE%%>	background-position: 0px -200px;<br />}<br /><br />div#right-side a:active {<br /><%%KEEPWHITESPACE%%>	height:100px; /*How far apart I've separated the images in my file*/<br /><%%KEEPWHITESPACE%%>	background-position: 0px -300px;<br />}<br />

5. When you’ve saved everything and have it all linking properly. Pull up the .html file in your browser and see the results as your cursor hovers and clicks. If all is well, bravo!

Tweet