Question

I’m trying to make a Rating System for my Forum and so I work with Star-Images for each Average Rating.
What I’d like to do is to display half of such a Star if a User has e.g. an Average Rating of 4.5.
When I design the Divs in CSS and change the width with document.getElementById(‘foo’).style.width = “50%”; it works like a charm, but when I do it like that:

my View:

<div id="half"><%= image_tag('../images/icons/rating_3.gif', options = {:style => 'width: 50%; height: 100%;'}) %></div

CSS:

#half {
width: 20px;
height: 20px;
display: inline-block;
}

I’m getting the whole star resized to 10px width but I only want 50% width of the image for a half star.

What I get:

Any suggestions?

thanks a lot

Answer 1

may be you have to right like this

  #half {
    width: 20px;
    height: 20px;
    display: inline-block;
    background-position:50% 0;
overflow:hidden;
    }