How to Use CSS Sprites

how to use css sprites?

Here is the complete code. Copy and paste in a notepad and save it as abc.html. Save the two images below in the same folder as:
image.gif for big one and trans.gif for small one.

<html>
<head>
    <title>Image Sprites</title>
    <style type="text/css">
        img.sprite
        {
            width:46px;
            height:44px;
            background:url(image.gif) 0px 0px;
        }        

        .sprite:hover
        {
            background: url(image.gif) 0px 44px;
        }
     </style>
</head>

<body>
    <img class="sprite" src="trans.gif" />
</body>
</html>

image.gif on imgur
trans.gif on imgur (1x1 pixels)

In simple words, CSS sprites use only one image instead of many.
So instead of many image requests from server only a single request is sent.

How use CSS sprites?

HTML

<div class="container">
    <ul>
        <li id="belt-1"></li>
        <li id="belt-2"></li>
        <li id="belt-3"></li>
        <li id="belt-4"></li>
    </ul>
</div>

CSS

.container {
    position: relative;
    width: 600px;
    height: 600px;
}

.container ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.container ul li {
    background-image: url(https://i.stack.imgur.com/SBxX4.png);
    margin-bottom: 20px;
    width: 150px;
    height: 78px;
    background-size: auto 286px;
    background-position: 0 0;
}

.container ul li#belt-2 {
    background-position-y: 210px;
}

.container ul li#belt-3 {
    background-position-y: 123px;
    height: 58px;
}

.container ul li#belt-4 {
    background-position-y: 66px;
    height: 58px;
}

Always Remember all images in CSS sprites, should have same canvas size

I create a basic example of CSS sprites, I hope this will help you.

use CSS sprites for list ( li ) background image

You can also use

li:before {
    background:url(..) no-repeat -##px -##px;
    width:##px;
    height:##px;
    display:block;
    position:absolute;
    content: " ";
    top:##px;
    left:##px;
}

and thus get an additional element added to the DOM and give that the background image.