While we can set the background images for elements with the help of Compass image helpers for individual images, it's often considered a better practice to use an image sprite. I'm sure you'll have used this technique before. A single image (referred to as an 'image sprite') is created that includes all the other images. This single image is then shifted around by the CSS background-position property to show different images on different elements. The technique has an additional benefit of using images for hover states. As the single image is already loaded, there's no delay when an item is hovered over (the delay is usually caused by the separate hover image being requested, fetched, and parsed).

It's a great technique but not without some headaches, principally, working out the background positions for each image. Well, guess what? Compass can take care of all this and more. I hope you're sitting down. This is quite simply brilliant.

We will use this technique to set...