StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>There is no real difference (if you're just talking about where to apply <code>background</code>, otherwise <a href="https://stackoverflow.com/questions/4565942/should-global-css-styles-be-set-on-the-html-element-or-the-body-element">BoltClock's answer to this other question</a> is a better fit). <code>html</code> is an element, just like <code>body</code> is.</p> <p>Both are valid choices, and both will both work in all common browsers.</p> <p>The YUI Reset for instance, chooses to set a <code>background</code> on the <code>html</code> element instead of <code>body</code>:<br> <a href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset.css" rel="nofollow noreferrer">http://yui.yahooapis.com/3.3.0/build/cssreset/reset.css</a></p> <p>This requires that you set your <code>background</code> on <code>html</code>, for instance see: <a href="https://stackoverflow.com/questions/6671846/cant-change-body-background-color-using-css-reset">can't change body background color using CSS reset</a></p> <p><strong>See:</strong> <a href="http://dev.w3.org/csswg/css3-background/#special-backgrounds" rel="nofollow noreferrer">http://dev.w3.org/csswg/css3-background/#special-backgrounds</a></p> <blockquote> <p>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.</p> </blockquote> <p>And:</p> <blockquote> <p>For documents whose root element is an HTML HTML element [HTML401] or an XHTML html element [XHTML11]: 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 HTML element.</p> </blockquote> <p>What that wall of text is saying is demonstrated here:</p> <ul> <li><code>background</code> on just <code>body</code>: <a href="http://jsfiddle.net/hhtzE/" rel="nofollow noreferrer">http://jsfiddle.net/hhtzE/</a></li> <li><code>background</code> on <code>html</code> and <code>body</code>: <a href="http://jsfiddle.net/hhtzE/1/" rel="nofollow noreferrer">http://jsfiddle.net/hhtzE/1/</a></li> <li><code>background</code> only <code>html</code>: <a href="http://jsfiddle.net/hhtzE/2/" rel="nofollow noreferrer">http://jsfiddle.net/hhtzE/2/</a></li> </ul>

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