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

by

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.

More Related Contents:

  1. Menu does not align correctly in Safari
  2. My inline-block elements are not lining up properly
  3. How can I select the last element with a specific class, not last child inside of parent?
  4. How to make CSS3 rounded corners hide overflow in Chrome/Opera
  5. Bootstrap full-width with 2 different backgrounds (and 2 columns)
  6. Minimum and maximum value of z-index?
  7. How can I find an element by CSS class with XPath?
  8. Should I use px or rem value units in my CSS? [closed]
  9. Why media queries has less priority than no media queries css
  10. Flexbox fill available space vertically
  11. Outline radius?
  12. Easier way to create circle div than using an image?
  13. Customizing Increment Arrows on Input of Type Number Using CSS
  14. How can I make a display:flex container expand horizontally with its wrapped contents?
  15. Remove outline from select box in FF
  16. How to make div’s percentage width relative to parent div and not viewport
  17. masking image with CSS
  18. Absolute position and Overflow:hidden
  19. How to insert spaces/tabs in text using HTML/CSS
  20. What is the ::content/::slotted pseudo-element and how does it work?
  21. How to remove/ignore :hover css style on touch devices
  22. How do I create a teardrop in HTML?
  23. Style a checkbox in firefox — remove check and border
  24. Centering an image within a div
  25. word-wrap break-word does not work in this example
  26. How to place Text and an Image next to each other in HTML?
  27. How can I control the height of an Option element in Webkit?
  28. How to make input autofocus in internet explorer?
  29. How to always show the vertical scrollbar in a browser?
  30. Image center align vertically and horizontally [duplicate]

Leave a Comment