-1

Based on: Setting background color for <html> element (without height set to 100%) apply to the whole viewport

The question will only rise, when <body></body> tag is not touching the browser-inside-boundries, ie, we try giving margin to element (so that it also doesn't touch) the browser window. To extend this example, again, we'll give margin to <html></html> tag, so that there is a 20px gap between html element and browser-inside-area.

Now, lets see what happens?

Case-I:

html {margin:20px; border:2px solid blue;}
body {margin:20px; border:2px solid brown;}
div {margin:20px; border:2px solid red; background:yellow; height:200px; width:200px;}
<div></div>

Case-II:

html {margin:20px; border:2px solid blue;}
body {margin:20px; border:2px solid brown; background:pink;}
div {margin:20px; border:2px solid red; background:yellow; height:200px; width:200px;}
<div></div>

Now, how stupid is it - to spill the 'background of body' to element, and to the area of viewport/browser-inside-window? Though, this is intended behavior, no-doubt? but doesn't this create anomaly or wrong-implementation of background and element integrity?

Note: We may provide background of html-tag also, which would take place as follows? But, then - in earlier example if spilling is happening ...should'nt it be consistant? And, the spill of div's background, should go ... and even body & html - should have been painted yellow? (in case-I), Why the inconsistency?

Case-III:

html {margin:20px; border:2px solid blue; background:gray;}
body {margin:20px; border:2px solid brown; background:pink;}
div {margin:20px; border:2px solid red; background:yellow; height:200px; width:200px;}
<div></div>

Though :root cannot have its own background, but <html> can, so again in Case-II, body's pink color should have stopped and NOT painted <html's> background, as this is a legal element and can have its own background. Am I wrong?

Deadpool
  • 7,811
  • 9
  • 44
  • 88
  • The statement "Though :root cannot have its own background, but `` can" makes no sense. In an HTML document the `:root` selector selects the `html` element. – Quentin Feb 12 '22 at 07:54
  • The first two answers at https://stackoverflow.com/questions/5225237/why-does-styling-the-background-of-the-body-element-affect-the-entire-screen between them quote enough of the spec to show this is defined behavior. (the first answer is incorrect about the definition of root - corrected in the comments). – A Haworth Feb 12 '22 at 07:56
  • 2
    Your question is not really a *question*. The behavior is clearly defined in the Spec. If you don't like it, you can always start a Github discussion with the CSS community and provide an alternative. You have a low chance to change such behavior but you can always try. You will get a reply of "why such behavior should remain that way" – Temani Afif Feb 12 '22 at 08:10
  • 1
    It's inconsistent, yes. It's just a historic necessity. – Alohci Feb 12 '22 at 16:01

1 Answers1

0

Because the spec says so:

For documents whose root element is an HTML "HTML" element or an XHTML "html" element that has computed values of 'transparent' for 'background-color' and 'none' for 'background-image', user agents must instead use the computed value of the background properties from that element's first HTML "BODY" element or XHTML "body" element child when painting backgrounds for the canvas, and must not paint a background for that child element. Such backgrounds must also be anchored at the same point as they would be if they were painted only for the root element.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335