This is correct behavior.1
body doesn't immediately take up the entire height of the viewport, even though it appears so when you only apply a background to the latter. In fact, the
html element will take on the background of
body if you don't give it its own background, and
html will pass this on to the viewport:
The background of the root element becomes the background of the canvas and its background painting area extends to cover the entire canvas, although any images are sized and positioned relative to the root element as if they were painted for that element alone. (In other words, the background positioning area is determined as for the root element.) If the root's ‘background-color’ value is ‘transparent’, the canvas's background color is UA dependent. The root element does not paint this background again, i.e., the used value of its background is transparent.
For documents whose root element is an HTML
HTML element or an XHTML
html element: if the computed value of ‘background-image’ on the root element is ‘none’ and its ‘background-color’ is ‘transparent’, user agents must instead propagate the computed values of the background properties from that element's first HTML
BODY or XHTML
body child element. The used values of that
BODY element's background properties are their initial values, and the propagated values are treated as if they were specified on the root element. It is recommended that authors of HTML documents specify the canvas background for the
BODY element rather than the
That said, however, you can superimpose any background image over a background color on a single element (either
body), without having to rely on two elements — simply use
background-image or combine them in the
background shorthand property:
background: #ddd url(background.png) center top no-repeat;
If you wish to combine two background images, you need to rely on multiple backgrounds. There are chiefly two days to do this:
In CSS2, this is where styling both elements comes in handy: simply set a background image to
html and another image to
body which you wish to superimpose over the first. To ensure the background image on
body displays at full viewport height, you need to apply
min-height respectively as well:
background: #ddd url(background1.png) repeat;
background: transparent url(background2.png) center top no-repeat;
Incidentally, the reason why you have to specify
body respectively is because neither element has any intrinsic height. Both are
height: auto by default. It is the viewport that has 100% height, so
height: 100% is taken from the viewport, then applied to
body as a minimum to allow for scrolling of content.
In CSS3, the syntax has been extended so you can declare multiple background values in a single property, eliminating the need to apply backgrounds to multiple elements (or adjust
background: url(background2.png) center top no-repeat,
#ddd url(background1.png) repeat;
The only caveat is that in a single multi-layered background, only the bottommost layer may have a background color. You can see in this example that the
transparent value is missing from the upper layer.
And don't worry — the behavior specified above with propagating background values works exactly the same even if you use multi-layered backgrounds.
If you need to support older browsers, though, you'll need to go with the CSS2 method, which is supported all the way back to IE7.
My comments under this other answer explain, with an accompanying fiddle, how
body is actually offset from
html by default margins even though it looks like it's being padded out instead, again owing to this seemingly strange phenomenon.
1 This may have its roots in setting the HTML
bgcolor attributes of
body causing the background attribute to apply to the entire viewport. More on that here.