htmlcssbackground

Why does styling the background of the body element affect the entire screen?

When you style the background of the body element, why does the styling affect the entire screen and not just the body element itself? Let's say I create the following rule:

body {
  width: 700px;
  height:200px;
  border: 5px dotted red;
  background-color: blue;
}

I find that the border shows up as 700px wide as I would expect, but the background color occupies the entire browser viewport. Why?

Solution

  • Quote from http://www.w3.org/TR/CSS21/colors.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.

    The body element is the root-element, and thus, as required by the CSS rules it loses its background style and the background style is applied to the containing canvas (the webpage area in the browser), therefor the entire screen is blue. The other properties stay with the element (e.g. the border).