• CSS Sprite Image

    Sprite image is a collection of different image put together in a single image. This will cause to send a single request for an image file rather than requesting for each images and thus, reducing the bandwidth. For example, we have created a sprite image like below:

    sprite

    This image contains different icons that we will be using. To use a specific icon, we need to get the x and y coordinate of that icon and the width and height. In our sprite image, each icon is 64 X 64 in pixels.

    sprite2

    This means that the home icon is from 0 to 64px, the search icon will be from 64px to 128px and so on.

    li {
       width: 64px;
       height: 64px;
       float: left;
       list-style: none;
    }
    .home {
       background: url('/resources/images/sprite.png') 0 0;
    }
    .pencil {
       background: url('/resources/images/sprite.png') -64px -192px;
    }
    .left {
       float: left;
    }
    .bug {
       width: 64px;
       height: 64px;
       background: url('/resources/images/sprite.png') -192px -128px;
    }
    <ul>
       <li class="home"></li>
       <li class="pencil"></li>
    </ul>
    <div>
       <div class="bug left" />
       <div class="left">Report here any bug you have encountered.</div>
    </div>
    Output
     
    Report here any bug you have encountered.

    Related Post