Menu
According to the spec:
It is recommended that authors of HTML documents specify the canvas background for the BODY element rather than the HTML element.
But it doesn't say what advantages it has. Why does the spec recommend this?
P.S. It crossed my mind when I saw Extra scrollbar when body height is 100vh: isn't it better to simply give the background to the html element instead?
244
The HTML <canvas> element is used to draw graphics, on the fly, via JavaScript. The <canvas> element is only a container for graphics. You must use JavaScript to actually draw the graphics. Canvas has several methods for drawing paths, boxes, circles, text, and adding images.
The <body> tag defines the document's body. The <body> element contains all the contents of an HTML document, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
The most common & simple way to add background image is using the background image attribute inside the <body> tag. The background attribute which we specified in the <body> tag is not supported in HTML5.
Prior to CSS, backgrounds were specified by adding the background and bgcolor attributes to the body element in HTML (along with the likes of text, link, alink, vlink, leftmargin, marginwidth, topmargin and marginheight).
CSS-compliant browsers convert these presentational attributes into the appropriate style rules, placed as author-level presentational hints with just less precedence than author-level * rules. More on this in css-cascade-3 and HTML. Namely, the background and bgcolor attributes are converted to background-image and background-color declarations respectively, for the body element.
So, the recommendation that authors specify the canvas background for the body element and not the html element was made to ease migration of legacy HTML documents from presentational attributes on the body element to CSS. Normally if you have control of both the markup and CSS the first thing you'd probably want to do is get rid of the presentational attributes. But you don't have to do so right off the bat; you can just add a background declaration specific to the body element, and it will seamlessly replace the entire page background (as described in the spec link in the question) as specified by the presentational attributes, with no further action necessary:
/* The bgcolor attribute is equivalent to a
body {
background-color: #FFFFFF;
}
rule at this position in the stylesheet,
except with less precedence than a * rule.
The following rule will override it as a
normal part of the cascade. */
body {
background-color: yellow;
}<body bgcolor=#FFFFFF>
<h1>Hello world!</h1>
<p>This page was once white...
<p>... now it's yellow!If you add it to the html element instead, you'll end up with two backgrounds:
/*
body {
background-color: #FFFFFF;
}
*/
html {
background-color: yellow;
}<body bgcolor=#FFFFFF>
<h1>Hello world!</h1>
<p>This page was once white...
<p>... wait, what?If you're aware of the body element having a bgcolor attribute, this does have the advantage of serving as a visual reminder to you to get rid of the attribute. But if that doesn't occur to you right away, you'll probably be left flummoxed.
Of course, if you're authoring new documents then this simply becomes a matter of tradition (which ties in to the whole "ease of migration" thing). There's nothing stopping you from applying backgrounds to both html and body for interesting effects, though even that has largely been superseded by the ability to add multiple background layers to one element and is only really necessary if you need to support older browsers. More on this in the link above.
58
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
