Concept:
The basic concept behind this tip is to make a div of particular height and use an empty star image ( assume grey bordered star that will act as blank star ) which will be repeated in x-axis and look something like below

Then we need to create another div inside it with same height, and the background will be set dynamically later as per the required rating. This div will be having the background as the full start (assume golden color star) which have been set to repeat only in x-axis.

If the rating is 2 out of 5, the inner div will cover upto 40% width of the outer div, so basically we can see the background of the inner div and rest 60% will be the background of the outer div. It will look somethig like below:

Implementation:

HTML
 
<div class="emptyRatingDiv">
    <div class="fullRatingDiv" style="width: 40px"></div>
</div>

Note: The inline style for width can be specified by templating or by scripting. It need to be set in px.

CSS – ( Assuming the dimension of the star image to be 20 X 20 )

.emptyRatingDiv {
    width: 100px; /* 20 * 5 px */
    height: 20px;
    padding: 0;
    background: url(emptystar.png) repeat-x;
}
 
.fullRatingDiv {
    height: 20px;
    padding: 0;
    background: url(fullstar.png) repeat-x;
}

So the final design will look like below,

That’s it, now the same concept can be applied to make cool progress bars.