Implementing image sprites in CSS

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.


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: <var><pixels shifted right></var>px <var><pixels shifted down></var>px;

See also

Full working demo at CSS Tricks


© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.

Advanced CSS CSS Image Graphics Guide NeedsContent Sprites Web