Display star ratings with css sprite

Sometimes we need to display star ratings on our site. Here css sprite is an easy way to do the same. This example will display ratings out of 5 which also includes 0.5, 1.5 and so on.

Image used in this code

You can use one of the images below.





The Css

   span.rating {
     background: url("stars-yellow.png") top left;
     /* background: url("stars-blue.png") top left; */
     display: inline-block;
     height: 21px;
     width: 115px;
     overflow: hidden;
     text-indent: -9999px;
    }
   span.r0 {background-position: -115px 0;}
   span.r05{background-position: -115px 21px;}
   span.r1 {background-position: -92px 0;}
   span.r15{background-position: -92px 21px;}
   span.r2 {background-position: -69px 0;}
   span.r25{background-position: -69px 21px;}
   span.r3 {background-position: -46px 0;}
   span.r35{background-position: -46px 21px;}
   span.r4 {background-position: -23px 0;}
   span.r45{background-position: -23px 21px;}
   span.r5 {background-position: 0 0;}

The Html

 
  <span class="rating r05">Rating : 0.5 star out of 5</span>
  <span class="rating r1">Rating : 1 star out of 5</span>
  <span class="rating r3">Rating : 3 stars out of 5</span>
  <span class="rating r45">Rating : 4.5 stars out of 5</span>

Only the stars will be displayed on the page. The text written between the span tags are hidden. If you want to display the text too, remove the text-indent property from the span.rating class.

Change only the image used in the css and display any one of the stars given above.