CSS Background-Size doesn't work with static color

background-size cover not working
background-size css
css background image size to fit div
background-size not working
css background color size
css background shorthand
mdn background-size css

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%.

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:


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>

background-size, If you only provide one value (e.g. background-size: 400px ) it counts for the width, and the height is set to auto . You can use any CSS size units  If you only provide one value (e.g. background-size: 400px) it counts for the width, and the height is set to auto. You can use any CSS size units you like, including pixels, percentages, ems, viewport units, etc.

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);


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-quaters {
  background: linear-gradient(to right, red 75%, transparent 0);
    <td class="half">50%</td>
    <td class="one-third">33%</td>
    <td class="three-quaters">75%</td>

background-size, Hi I'm trying to get the background-size change but I can't get it to work. Check ou this link for some background-size documentation. https://developer.mozilla.​org/en-US/docs/Web/CSS/background-size but it doesn't work. a {background-size:20px 20px;} but it doesn't work. The background image stays exactly the same size. This is what I have been trying to do: <!-- HTML:

As suggested in comments, I have had good success with a single pixel background-image that is stretched to the appropriate percentage background-size of the table cell. This works in all modern browsers (IE9+).

This has the advantage (over using an additional div element to contain the "colored bar") of being independent of any other styling you might want to apply to the table cell, such as text-align, etc. It will naturally appear behind the cells content and flexes to fill the table cell if using percentages.

td.bargraph {
    background:transparent url(/img/dot-green.gif) 0 center no-repeat;
    text-align: center;
<td class="bargraph" style="background-size:<?=$perc?>% 80%"><?=$perc?>%</td>

Where $perc is your calculated percentage.

background-size not working, Specify the size of a background-image with "auto" and in pixels: #example1 { background: url(mountain.jpg); background-repeat: no-repeat; background-size:​  The background-size CSS property allows developers to designate the size at which a background-image should appear within an element. MooTools Developer Christoph Pojer employs the background-size technique on his website, allowing for his masthead to look "full" on browsers of all sizes, even mobile.

Interesting question. I would put a div, colored red, inside each of the tds you want to effect. Then use jQuery to get the number (string) inside the td and make it into a variable, which you can then use to set the width of the div.

CSS background-size property, The background-size CSS property allows developers to designate the size at which a background-image should appear within an element. Definition and Usage. The background-size property specifies the size of the background images. There are four different syntaxes you can use with this property: the keyword syntax ("auto", "cover" and "contain"), the one-value syntax (sets the width of the image (height becomes "auto"), the two-value syntax (first value: width of the image,

CSS background-size, background-size: width height;. By default, the width and height are set to auto which retains the original image dimensions. We can resize an  It's not widely supported. See a complete list of CSS properties that support transition here.I would have a different approach. Wrap your element with background-color you wanted to do transition to, and do a scale transition for your element.

How to Resize Background Images with CSS3, I can set background-image property in CSS and i'm able to see that image as Shorthand properties also doesn't work for background. The background-size CSS property sets the size of the element's background image. The image can be left to its natural size, stretched, or constrained to fit the available space.

Cannot use `background-size` and `background-position`, We'll use the CSS background-size property to make it happen; no JavaScript all times */ background-position: center center; /* Background image doesn't tile  In similar fashion you could make a jQuery-plugin or script that makes background-size work in your situation (background-size: 100%) and in IE8-. So to answer your question: Yes there is a way but atm there is no plug-and-play solution (ie you have to do some coding yourself).

  • background-size is for images, not background colours.
  • maybe you can try with some red background-image, and then use background-size.
  • @MiljanPuzović You mean I create an image with the height of a TD and I size the width with the % ?
  • Something like that. Or try repeat bg image. Important part is background-size, which you can use only with images.
  • @MiljanPuzović Worth the short to try it out even if I found another solution. The image % is working.
  • And I put my text in the inner ? A div with X % and another one float hover with the same property with the text ?
  • Yes, you can place text in the inner div.
  • Your technic was working, but the text space was also the same as the width space. If width is 0%, the text will overflow. This is how I did it to manage it to work : <td style="padding: 0; margin: 0;"><div style="float: left; width: 50%;"><div style="width: 100%; height: 34px; background-color: lightgray; text-align:center">&#160;</div></div><div style="float: left; position: absolute; padding: 8px;">25 / 50</div></td>
  • Yes, it will work. But you have to consider that a text need to be apply in the TD.
  • Yeah, i guess you would put the text in the div also