Background on html

There’s a paragraph in the CSS specification regarding the background property that states the following:

For HTML documents, however, we recommend that authors specify the background for the BODY element rather than the HTML element. User agents should observe the following precedence rules to fill in the background: if the value of the ‘background’ property for the HTML element is different from ‘transparent’ then use it, else use the value of the ‘background’ property for the BODY element. If the resulting value is ‘transparent’, the rendering is undefined.

This might lead to a surprise when trying to add a background on top of what you have on the body element – when you add a background property to the HTML element everything will shift. You can observe this in most browsers on the links below.

Before:

html {}
body {background:#fcc;}

After:

html {background:#ccf;}
body {background:#fcc;}

It seems you really have to add a semantically meaningless element…

Leave a Reply