Image sprites are used in numerous web apps where multiple images are used. Rather than include each image as a separate image file, it is much more memory- and bandwidth-friendly to send them as a single image; using background position as a way to distinguish between individual images in the same image file, so the number of HTTP requests is reduced.

Implementation

Suppose an image is given to every item with classtool-btn:

.tool-btn {  background: url("myfile.png");  display: inline-block;  height: 20px;  width: 20px;}

A background position can be added either as two x, y values after the<url> in the background, or asbackground-position. For example:

#btn1 {  background-position: -20px 0px;}#btn2 {  background-position: -40px 0px;}

This would slide the starting point of the background image for the element with the IDbtn1 20 pixels to the left and the element with the IDbtn2 40 pixels to the left (assuming they have the classtool-btn assigned and are affected by the image rule above).

Similarly, you can also make hover states by targeting#btn:hover.

See also

• Full working demo at CSS Tricks