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:

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.

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>