Background color percentage?

Question

Is their any way I can use a background color to show in 50% of my division using either css or javascript???The box in which I want to do this has a background Image[png] which I want to fill 50% with a color for showing ratings...... I can use an Image of the half filled background Image but I believe that would slow down my Rating system, is their any way I can fill the box 50% with a color or I have to resort to replacing the background with a half filled image itself.. Thanks

Answer 1

There is no way to set it to fill its parent by 50% using css. You are going to have to calculate the size of the progressbar. So lets say your div is 100px (and has a white background) and you want the bar to show 55%, create a div inside it with a length of 55px with the color of the progressbar as background.

Answer 2

I don't know if there's more in the div than just the background color that shows the progress, but let's assume it's the only thing in there. All you have to do is make sure the progress bar has a fixed width, a height and an overflow: hidden.

Then you place a div inside it that has the color you want as a background color, and the same width as the container div. Both divs should have a position: property defined, absolute or relative doesn't really matter. Then the only thing left is to set the inner div to a position that you want, for example left: -50%;

Only this last part you'll need javascript for if you want to do it dynamically. Something like getElementById('progress').style = 'left: -50%' should do the trick.

A quick and dirty (but working) example:

<div style="width: 200px; height: 2em; overflow: 
    hidden; position: relative; padding: 1px; border: 1px solid red">

    <div style="width: 200px;  height: 2em; 
        background: blue; position: relative; left: -50%;">

        &nbsp;
    </div>

</div>