CSS Image Sprites


Image "sprites" are used in numerous web apps where multiple icons are used. Rather than include each icon as a .png image file, it is much more memory and bandwidth-friendly to send it as a single image because the number of HTTP requests is reduced.


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

<style> .toolbtn {background:url(myfile.png); display:inline-block; height:20px; width:20px } </style>

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 id=btn1 element left 20, and the id=btn2 element left 40 (assuming they have class="toolbtn", 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; }

Further reading

Full working demo: http://css-tricks.com/snippets/css/perfect-css-sprite-sliding-doors-button/


Document Tags and Contributors

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