Background-Color of Body Tag Applied to The Whole HTML

Background-Color of BODY tag applied to the whole HTML

This is indeed confusing, but it is specified in the CSS 2.1 specification, clause 14.2 Background: if the computed value of background-color is transparent and the computed value of background-image is none for the html element (as things are by default), browsers must instead use the computed value of the background properties for the body element and must not render a background for body (i.e. make it transparent). That is, body background magically turns to html background if html lacks a background of its own – and this only affects background properties, not the true height of the body element.

I haven’t seen any rationale for this odd rule, which prescribes a kind of “reverse inheritance”. But it’s clearly specified in CSS 2.1 and applied by browsers.

As explained in other answers, you can make your content have a background of specific height either by setting a background on html (so that body background is really applied to body only) or by using wrapper element inside body and setting height on it (since the special rule applies to body only).

Thanks to Anne van Kesteren who pointed to the CSS spec when I asked about this in the WHATWG mailing list. (I thought I knew CSS 2.1 by heart but really didn’t. ☺)

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>

why does background-color property fills the entire screen even body have 0 height?

body tag is always taking the whole document's body, so if you want to give background with limited height then put one DIV inside the body tag and then give specific height, then it will work fine.

so for the solution, please give background color to HTML div as well.

html {
  background-color: #ffffff;
}

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

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

how to set the background color of the whole page in css

I already wrote up the answer to this but it seems to have been deleted. The issue was that YUI added background-color:white to the HTML element. I overwrote that and everything was easy to handle from there.

Setting background color for <html> element (without height set to 100%) apply to the whole viewport

Because the spec says so:

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.

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

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; }

Why does html tag take the background of the body tag only when the html tag has no background-color property set

This is by design.

According to the W3C Colors and backgrounds page,

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.

Or, tl;dr: Leaving the <html>'s background alone and only styling the body will cause the background to be assigned to the whole document. This is the recommendation.

The reason is, probably, for compatibility reasons. Long ago, the <body>, element also played the role of the canvas, and the <html> element did not really have any properties of its own. So you could assign a bgcolor property to the <body> (but not to the <html>) and that would become the canvas background.

And the answer to your last question is: only if you want to. In most cases, not styling the <html> at all will be enough. Except in special cases, e.g. if you want a differently coloured edge around the body, as you noticed.

Example with background on the <body> only:

body {background:lime}

Hello world

Background-Color of Body Tag Applied to The Whole HTML