CSS Background-Size doesn't work with static color

Question

I am very bad in CSS and I need to accomplish something complicated for me.

I got a table with data and I have a column where I have something like Qty Assigned / Qty Requested. I calculate the % assigned so 5 assigned of 10 will be 50%. Now, I want to put a background-color on the TD who match the %. So 50% will be half of the TD in let's say red.

I have tried to use background-color: red; background-size: <?php echo $BgPct; ?>%; but it doesn't work.

Anyone have solutions ? I can use whatever. I have jQuery also. I don't care if it's CSS1/2/3, but it need to be accurate so 66% isn't a background picture of 75%.

Answer 1

You can use linear-gradient for this

For example, if you need 50% of red

td {
  background: linear-gradient(to right, red 50%, transparent 0);
}

Demo:

table {
  border-collapse: collapse;
}

td {
  border: 1px solid gray;
  padding: 10px;
}

.half {
  background: linear-gradient(to right, red 50%, transparent 0);
}

.one-third {
  background: linear-gradient(to right, red 33.33%, transparent 0);
}

.three-quarters {
  background: linear-gradient(to right, red 75%, transparent 0);
}

<table>
  <tr>
    <td class="half">50%</td>
  </tr>
  <tr>
    <td class="one-third">33%</td>
  </tr>
  <tr>
    <td class="three-quarters">75%</td>
  </tr>
</table>

Zero 0 second value is used intentionally to avoid duplicating first value. This works because next value in gradient can't be less than previous.

Answer 2

You can place a div inside another div. Make both divs have the same height. The inner div will have a background color (red). Then you can set the width of the div some % and thats how much it will be filled in.

This is how twitter bootstrap implements its progress bars. If you want a vertically filling bar I think you can set the height to a % and make the widths the same.

Here is the twitter bootstrap example:

http://cssdeck.com/labs/twitter-bootstrap-progress-bars

Click the details tab to see the source code.

A basic implementation example:

<div style="width:50%">
    <div style="width: 50%; background-color:red; text-align:center">Hello</div>
</div>