span.stars, span.stars span {
    display: block;
    background: url(stars.png) 0 -16px repeat-x;
    width: 80px;
    height: 16px;
}

span.stars span {
    background-position: 0 0;
}

/*Listing Img Height*/
.container
     {
     height:200px; 
     display:block; 
     position:relative;
     overflow:hidden;
     }
.container img 
    {
     position:absolute;
     top:0;
     left:0; 
     width:100%;
     }

/* Ratings */
.ratings_bar {
    /*this class creats 5 stars bar with empty stars */
    /*each star is 16 px, it means 5 stars will make 80px together */
    width: 80px;
    /*height of empty star*/
    height: 16px;
    /*background image with stars */
    background: url(http://webcodingeasy.com/images/stars.png);
    /*which will be repeated horizontally */
    background-repeat: repeat-x;
    /* as we are using sprite image, we need to position it to use right star, 
    //0 0 is for empty */
    background-position: 0 0;
    /* align inner div to the left */
    text-align: left;
}
.ratings {
    /* height of full star is the same, we won't specify width here */
    height: 16px;
    /* background image with stars */
    background: url(http://webcodingeasy.com/images/stars.png);
    /* now we will position background image to use 16px from top, 
    //which means use full stars */
    background-position: 0 -16px;
    /* and repeat them horizontally */
    background-repeat: repeat-x;
}