mozilla
Your Search Results

    CSS Image Sprites

    Introduction

    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.

    Implementation

    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:

    <style>
    #btn1 {background-position: -20px 0px}
    #btn2 {background-position: -40px 0px}
    </style>

    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: i80and, Jeremie, kscarfone, xfq, Luke314
    Last updated by: xfq,