Change color of HTML background ONLY

Question

My body is 1024px wide. When I set background of the html tag in CSS to a color (say, maroon,) all of the page becomes maroon.

Normal behavior, but how do I set one color for body and another color for the space the body doesn't use?

When I set the background of body, only my first div is colored.

Answer 1

The reason that only your first div is colored is this: the html element takes up all visible space in the document, but the body takes up only as much space as its children.

Fix: set a fixed width and height for the body first, then use background-color on both the body and html.

body { background-color: white; } /* color for body */
html { background-color: maroon; } /* color for space not used by body */

Answer 2

In CSS/HTML every element receives many properties from its parent, if not specifically defined. When it comes to colors, most element will have a transparent background (or no background) unless you set its CSS properties.

Therefore, you need to set the properties accordingly:

html {background-color:#000;}
body {background-color:#fff;}

Hope this helps!