CSS-Sprites

To reduce number of image call and increase your webpage performance

by Anusha ch

HTML

<script src="http://s16.postimg.org/kbr0efly9/spritesheet.png"></script>
<img class="sprite sprite-gmail">
    
<img class="sprite sprite-linkedin">
    
<img class="sprite sprite-twitter">
    
<img class="sprite sprite-stackoverflow">
    
<img class="sprite sprite-tumblr">

CSS

.sprite {
    background-image: url(http://s16.postimg.org/kbr0efly9/spritesheet.png);
    background-repeat: no-repeat;
    display: block;
}

.sprite-github {
    width: 30px;
    height: 30px;
    background-position: -5px -5px;
   }

.sprite-gmail {
    width: 30px;
    height: 30px;
    background-position: -45px -5px;
}

.sprite-linkedin {
    width: 30px;
    height: 30px;
    background-position: -5px -45px;
}

.sprite-stackoverflow {
    width: 30px;
    height: 30px;
    background-position: -45px -45px;
}

.sprite-tumblr {
    width: 30px;
    height: 30px;
    background-position: -85px -5px;
}

.sprite-twitter {
    width: 30px;
    height: 30px;
    background-position: -85px -45px;
}