StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>This is indeed confusing, but it is specified in the CSS 2.1 specification, clause <a href="http://www.w3.org/TR/CSS2/colors.html#background">14.2 Background</a>: if the computed value of <code>background-color</code> is <code>transparent</code> and the computed value of <code>background-image</code> is <code>none</code> for the <code>html</code> element (as things are by default), browsers must instead use the computed value of the background properties for the <code>body</code> element and must not render a background for <code>body</code> (i.e. make it transparent). That is, <code>body</code> background magically turns to <code>html</code> background if <code>html</code> lacks a background of its own – and this only affects background properties, not the true height of the <code>body</code> element.</p> <p>I haven’t seen any rationale for this odd rule, which prescribes a kind of “reverse inheritance”. But it’s clearly specified in CSS 2.1 and applied by browsers.</p> <p>As explained in other answers, you can make your content have a background of specific height either by setting a background on <code>html</code> (so that <code>body</code> background is really applied to <code>body</code> only) or by using wrapper element inside <code>body</code> and setting height on it (since the special rule applies to <code>body</code> only).</p> <p>Thanks to Anne van Kesteren who pointed to the CSS spec when I asked about this in the WHATWG mailing list. (I thought I knew CSS 2.1 by heart but really didn’t. ☺)</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload