Background Images
Previously we've added background-color but there are additional background properties which include:
background-image - adds an image in the background
background-position - positions the background image
background-repeat - controls how/if the image repeats in the background
Background-Image
To use the other background properties, first there must be a background image:
section {background-image: url('images/sprite.gif');}
Background-Position
Values include left, right, top, bottom, center, %, inherit and initial. The first value represents the horizontal placement while the second value represents the vertical placement:
section {background-position: top right;} or section {background-position: 0 50%;}
Background-Repeat
Values include repeat (repeats horizontally and vertically), repeat-x (repeats horizontally), repeat-y (repeats vertically), initial, inherit and no-repeat. This can look like:
section {background-repeat: no-repeat;} or section {background-repeat: repeat-x;}
Image Sprites
Sometimes you may want to have multiple states of one image. Combining images into one file often creates a slightly smaller file size and then only one image needs to be requested by the browser - this saves loading time.

→
Link States and Image Sprites

Perhaps you have an image link where you want the image to change if you are hovering or if you have visited the link. If your navigation bar is made up of image links, image sprites will be very helpful!