Reputation: 966

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?

Upvotes: 26

Answers (8)

Kostas Minaidis

Reputation: 5412

According to the Specs and specifically the 2.11. Backgrounds of Special Elements section:

"The document canvas is the infinite surface over which the document is rendered"

"Since no element corresponds to the canvas, in order to allow styling of the canvas, CSS propagates the background of the root element (in the case of HTML, the <body> element) as described below:

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

Even though the <body> element has a height of 500px...

...its background color propagates to fill the entire document canvas:

However, as specified in the 2.11.2. The Canvas Background and the HTML Element section of the Specs:

"Using containment disables this special handling of the HTML body element."

By using the contain CSS property, the <body> element "regains its autonomy" from the canvas, and the background color gets applied within its strict layout boundaries:

Upvotes: 1

melhosseiny

Reputation: 10144

From CSS: The Definitive Guide by Eric Meyer

In CSS values are never propagated upward; that is, an element never passes values up to its ancestors. There is an exception to the upward propagation rule in HTML: background styles applied to the body element can be passed to the html element, which is the document's root element and therefore defines its canvas.

So when you add the background-color: blue; declaration to the body element, this value is propagated to the html element (which is also the root element). Add this declartion to see it for yourself.

html {
    background-color: grey;
}

Upvotes: 15

Shaz

Reputation: 15867

This is why it's a good idea to use containers. Such as:

<body>
    <div id="container">

    </div>
</body>

Example here: http://jsfiddle.net/Shaz/2FqqV/

Upvotes: 0

Dribbel

Reputation: 2100

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).

Upvotes: 19

Jake

Reputation: 4899

When you set the background color of <body>, the browser interprets this as the background color for the entire window, even if you've forced the <body> to be smaller with CSS. Otherwise, what color would the outside of the <body> tag be?

Upvotes: 1