Previous Lecture Complete and continue  

  Creating background images with a CSS sprite

CSS sprites are a way of using just one image for all the background images on the site – the trash can and its hover version, the profile picture, etc. and then displaying just the right bits of it in the right places by shifting its position so that only a little bit of the image is displayed in each place.

The advantage of this is faster page loading, as only one image is loaded and reused. This also reduces the number of HTTP requests made.

You can read more about CSS sprites at