How does the background to an html element occupy the entire viewport?

Issue

Without even providing any height to the html element, how does the background cover the entire viewport. When I inspect the computed height of the html element it's just 8px which is because of the margin that body gets from user agent stylesheet.

html {
  background: hotpink;
}

This even happens if you give a background to body: {background: hotpink} when the computed height of body is 0px.

With body, I know that it's actually not the body whose background is visible, it's the html that reverse inherits the background of body. So, it's kind of similar to setting it on the html.

But my doubt is how does it occupy the full viewport when it has no content or any heights specified?

And it seems that this behavior is only with the background property because adding a border makes it really clear that the height of html is 8px only.

html {
  background: hotpink;
  border: 2px dotted rebeccapurple;
}

Solution

~ Per W3

The background of the root element becomes the background of the canvas and covers the entire canvas, anchored (for 'background-position') at the same point as it would be if it was painted only for the root element itself. The root element does not paint this background again.

In CSS, values are never propagated upward, meaning an element never passes values up to its ancestors. However, there are exceptions to the upward propagation rule in HTML:

background styles that are applied to the body element can be passed to the HTML element, which is the document's root element, therefore, defines the canvas.

~ The Definitive Guide

So in your example, the body element is the root-element, and as required by the CSS rules from the browser, it loses the initial background style and the new background style applies to the containing canvas, therefore making the entire screen is hot pink.

Answered By - カメロン