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, so the number of HTTP requests is reduced.

Note: When using HTTP/2, it may in fact be more bandwidth-friendly to use multiple small requests.


Suppose an image is given to every item with class toolbtn:

.toolbtn {
  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 as background-position. For example:

#btn1 {
  background-position: -20px 0px;

#btn2 {
  background-position: -40px 0px;

This would move the element with the ID 'btn1' 20 pixels to the left and the element with the ID 'btn2' 40 pixels to the left (assuming they have the class toolbtn assigned and are affected by the image rule above).

Similarly, you can also make hover states with:

#btn:hover {
  background-position: <pixels shifted right>px <pixels shifted down>px;

See also

Document Tags and Contributors

Contributors to this page: mfluehr, Sebastianz, teoli, xfq, Jeremie, kscarfone, i80and, Luke314
Last updated by: mfluehr,