/* Generated by http://css.spritegen.com CSS Sprite Generator */
 
.vacu, .bone, .came, .cera, .cont,
.hand, .home, .post, .setu, .spec,
.tech, .vial
{ display: inline-block; background: url('png.png') no-repeat; overflow: hidden; text-indent: -9999px; text-align: left; }
 
.vacu { background-position: -5px -0px; width: 33px; height: 32px; }
.bone { background-position: -5px -37px; width: 32px; height: 31px; }
.came { background-position: -5px -73px; width: 32px; height: 32px; }
.cera { background-position: -5px -110px; width: 32px; height: 32px; }
.cont { background-position: -5px -147px; width: 32px; height: 33px; }
.hand { background-position: -5px -185px; width: 32px; height: 31px; }
.home { background-position: -5px -221px; width: 32px; height: 32px; }
.post { background-position: -5px -258px; width: 32px; height: 32px; }
.setu { background-position: -5px -295px; width: 32px; height: 32px; }
.spec { background-position: -5px -332px; width: 32px; height: 33px; }
.tech { background-position: -5px -370px; width: 32px; height: 30px; }
.vial { background-position: -5px -405px; width: 18px; height: 32px; }


<div class="vacu"></div>
<div class="bone"></div>
<div class="came"></div>
<div class="cera"></div>
<div class="cont"></div>
<div class="hand"></div>
<div class="home"></div>
<div class="post"></div>
<div class="setu"></div>
<div class="spec"></div>
<div class="tech"></div>
<div class="vial"></div>
_______________________

.megaphone {width:50px; height:50px; background:url(images/sprite.png) 0 0px;}
.smile {width:50px; height:50px; background:url(images/sprite.png) 0 -50px;}
<div class="megaphone"></div> 
<div class="smile"></div>