Why background color is set to whole document instead of 100px of height of html element?

Question

I have set the height of the HTML tag to 100px and the background color to coral but it is applied to the whole document.

By default, the height of the HTML tag is auto and if I set the background color to that HTML tag then it is applied to the whole document which is obvious as the height is auto.

Please help me to understand the height property to HTML tag and body tag.

* {
  margin: 0;
  padding: 0;
}

html {
  height: 100px;
  background-color: coral;
}

<html>
    <head></head>
    <body></body>
</html>

Please show the relevant `HTML` as well – Ahmad Habib Dec 28 '20 at 08:18 — Ahmad Habib, Dec 28 '20 at 08:18

score 2 · Accepted Answer · answered Dec 28 '20 at 08:31

2

Because that's what the specs ask for:

The background of the root element becomes the canvas background and its background painting area extends to cover the entire canvas.

Note that contrarily to what you thought, when the <html> node has its height set to auto, it won't cover the whole canvas either:

html { border: 1px solid red; }

Also note that even setting the rule on the <body> would have the same result if the <html> had its own background set to none, thanks to background-propagation.

* {
  margin: 0;
  padding: 0;
}

html {
  height: 100px;
  border: 1px solid green;
}
body {
  background-color: coral;
}

answered Dec 28 '20 at 08:31

Kaiido

123,334
13
219
285

one doubt HTML node is the root element right? – Subrato Pattanaik Dec 28 '20 at 08:37
1

Yes it is in an HTMLDocument. – Kaiido Dec 28 '20 at 08:40
sorry, one more doubt what is the height and width of a canvas? From the above example what i have understand that its height and width is 100vh and 100vw? – Subrato Pattanaik Dec 28 '20 at 08:46
There is [a link](https://www.w3.org/TR/CSS2/intro.html#the-canvas) in my answer. "*The canvas is infinite for each dimension of the space*" – Kaiido Dec 28 '20 at 08:53
oh understood!! Thanks to you and stackoverflow. – Subrato Pattanaik Dec 28 '20 at 09:00

score -2 · Answer 2 · answered Dec 28 '20 at 08:33

-2

The whole document is inside the tag. so when you put the colour to the html tag the colour is applied to the whole document

answered Dec 28 '20 at 08:33

NirantharMJavagal

1

Why background color is set to whole document instead of 100px of height of html element?

2 Answers2