Why background css property breaks down in to background-image while updating the height of the background div?

Question

I have a html with inline css styling like this:

<div class="bgdiv" style="background: url('http://wallpaper.pickywallpapers.com/1366x768/colorful-circles-and-drops.jpg') local center center no-repeat transparent;
background-size:100% 100%;
width: 400px;height:400px"> I am some dummy text. </div>

Which renders correctly, but if I change the height of the div to 500px via javascript it breaks down into several components of background like this

$(document).ready(function () {
  $('.bgdiv').css('height', '500px');
});

Final/output inline css style:

background-image: url(http://wallpaper.pickywallpapers.com/1366x768/colorful-circles-and-drops.jpg); 
background-attachment: local; 
background-color: transparent; 
background-size: 100%; 
width: 400px; 
height: 500px; 
background-position: 50% 50%; 
background-repeat: no-repeat no-repeat;

If you notice I applied background but now it is background-image and the biggest problem is background-size:100% however I applied background-size:100% 100% which is unexpected and I don't want it to change.

Here is the DEMO http://jsfiddle.net/pu7WR/1/

Please inspect to see the changes in css. I am not sure if this is the expected behavior but background-size:100% is breaking things I want it to be background-size:100% 100%

Note: I can not use a class here. And I know, I can change the background-size after updating the height.

But why so? Why it is getting updated in the first place?

Let me know I can provide further details. (I ll try to provide better title for the question)

Answer 1

That's normal. background is a shorthand property that allows you to set the individual properties at once. Internally, the browser parses this shorthand property and applies its values to each of the individual properties it represents.

That's why something like this would cause "unexpected" results:

#elem {
    background-color: red;
    background:url(/my/awesome/image.png) no-repeat scroll left top;
}

The element will appear with no red background colour, because the background shorthand property overrides it with transparent (the default assumed value if you don't specify it).

Answer 2

This actually does seem like a bug. If you set the values to different numbers then it will always retain it, but if you use an exact number twice it will use just the one, which is obviously a problem because that means the other will be auto, which will give a different result to what you want. The workaround I found was setting one to 100% and the other to 99.99% which is obviously a bit of a hack, but it does work:

http://jsfiddle.net/pu7WR/4/

<div class="bgdiv" style="background-image: url(http://wallpaper.pickywallpapers.com/1366x768/colorful-circles-and-drops.jpg); background-attachment: local; background-color: transparent;   background-size: 99.99% 99.99%; height: 500px; width: 400px; background-position: 50% 50%; background-repeat: no-repeat no-repeat;">
    I am some dummy text.
</div>

Another option (if you are able) is to wrap the content in it's own div and set the height on that one instead: http://jsfiddle.net/pu7WR/5/

<div class="bgdiv" style="background-image: url(http://wallpaper.pickywallpapers.com/1366x768/colorful-circles-and-drops.jpg); background-attachment: local; background-color: transparent;   background-size: 100% 100%; height: 500px; width: 400px; background-position: 50% 50%; background-repeat: no-repeat no-repeat;">
    <div class="contentDiv">I am some dummy text.</div>
</div>

$(document).ready(function () {
    $('.contentDiv').css('height','500px');
});