Just One of Those Weird Things About CSS: Background on <body>

Avatar of Chris Coyier
Chris Coyier on

📣 Freelancers, Developers, and Part-Time Agency Owners: Kickstart Your Own Digital Agency with UACADEMY Launch by UGURUS 📣

So you want to make the background of your website red eh? You’ll probably put this in your CSS:

body {
  background: red;
}

Done!

Check out this Pen!

You’re going about your business and then all the sudden one day this happens:

Check out this Pen!

What in the heck? Why is the red cut off like that? I put red as the background color on the body?

You did, but the fact that that red color floods the background is just a strange anomaly of CSS. The body element isn’t actually as tall as the browser window. It’s only as tall as the content inside it, just like a div or anything else.

See:

In the absence of a background on the html element, the body background will cover the page. If there is a background on the html element, the body background behaves just like any other element.

Somewhere along the line, a background-color got set on the html element.

Perhaps you’re using normalize.css 2.1.1, which included setting the background to white on the html element to “Prevent system color scheme’s background color being used in Firefox, IE, and Opera.” This has since been reverted, presumably because it caused this issue too widely.

To “fix” it, just remove the background on the html element, or move whatever you want to “flood” always to the html element as its behavior is consistant.