Background Color

Every element has a background. By default, it is transparent, so we see through it to whatever is behind it: in our case, the white page.

The background-color property fills the background with a color. The background covers the whole area of the element, not just the space behind the letters. Look at the black area around the main heading: it is as wide as the page, even though the heading is short.

The body element is special here: the browser paints its background over the whole window.

As you know from the lesson on selectors, background-color is not inherited, unlike color. It may look as if it were: if we gave main a background, the paragraphs inside it would seem to have it too. In fact, the paragraphs keep their transparent background, and we see the background of main through them.

When you choose colors, think about contrast: text must clearly stand out from its background. Dark text on a light background or light text on a dark background is easy to read; gray text on a gray background is not:

Black text on a white background is easy to read.

Dark gray text on a gray background is hard to read.