Giving background-color to body applying whole page. Why?

The main reason is because the HTML takes the background-color of BODY since:

The background of the root element becomes the background of the canvas and covers the entire canvas [...]

So since the default background-color of HTML is transparent it will take the one from BODY. However applying a color to both the HTML and BODY elements you will see that the BODY background doesn't cover the whole page anymore. 

html {
  background-color: blue;
}

body {
  background-color: red;
}
<html>

<body>
  <div>Hello World!</div>
</body>

</html>

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.

For HTML documents, however, we recommend that authors specify the background for the BODY element rather than the HTML element. 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.

From W3 - 14 Colors and Backgrounds.


height you see in inspect is min-height That is equal height's element div, background-color change max-height That is equal 100% his parents(html).

For Example:

change min-height and run inspect and see result :

body {
   background-color: red;
   min-height: 200px;
}
<div>Hello World!</div>

So, You see height in inspect Change 200px; But color red cover whole page.


CSS tricks has a related post in merit link . It seems that body styles are expanded to html because:

html is the root element of a document where body is a descendent contained within it. In fact, there is a :root selector in CSS. These target the exact same thing


it's actually pretty logic. First of all <html> and <body> tags are required tags in a webpage. Where the <html> tag contains all of the <html> code the <body> tag holds all of the contents.

Consider this standard structure for a basic HTML document:

<!DOCTYPE html>
<html lang="en">

  <head>
    <!-- Metadata and such -->
  </head>

  <body>
    <!-- Where the content begins -->
  <body>

</html>

The spec defines <html> as the root element of a document, and we can clearly see that in the above example: the element is the very top level of all other elements. The buck stops there because there are no more levels beyond that from which styles can be inherited.

From there, and make up the only two elements that fall directly inside . In fact, the spec defines directly in contrast to since those are the only two elements that need to be distinguished.

So, the bottom line here is that is the root element of a document where is a descendent contained within it. In fact, there is a :root selector in CSS. These target the exact same thing.

It's tempting to think that any styles we want to be inherited across the board should be applied directly to <html> because it is the root element of the document. <html> supersedes <body> in hierarchy, so it follows that it must contain all global styles.

But that's not exactly the case. In fact, inline attributes for the following were originally assigned to <body> in the spec:

  • background
  • bgcolor
  • marginbottom
  • marginleft
  • marginright
  • margintop
  • text

The background-color

There is a weird thing in CSS where the background-color on <body> floods the whole viewport even if the metrics of the element itself don't cover that whole area. Unless the background-color gets set on the html element, then it doesn't.

If flooding is the goal, it can be smart to just set it on the html element to begin with.

Tags:

Html

Css

Recent Posts