Defining CSS
Create the CSS that will define properties of the rating bar.
<style>
.rating_bar {
background-image:url(images/rate_meter.png);
background-repeat: no-repeat;
background-color: #24ff00;
width:125px;
height:25px;
}
</style>
As you can see the entire bar will be 125 pixels wide (25 pixels –the star width multiplied by 5 -the number of stars) and 25 pixels high (again the height of the star image).
The background image is nothing but a white image with the same dimensions as the rating bar. As we will be dynamically positioning the background image we have to make sure it doesn’t tile (background-repeat: no-repeat).
I have selected bright lime color (#24ff00) to indicate a star with a rating. The meaning of this setup will become clear to you later in the article.
Alex July is a Vancouver-based (Canada, British Columbia) Web Developer/ Graphic Artist who has an extensive experience in both creative realms.