Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS CSS Layout Basics Getting Started with CSS Layout Creating a Layout Wrapper

Applying background to body instead of html?

At 1:33 of this video, Guil says:

"One advantage to using the body as a wrapper is that you don't have to add an extra div element in your markup. But if you want to give your page a full background color or image, you'll need to add it to the HTML element, since it's the parent of the body and the root of the document."

However, I applied a background color to the body element, and it worked. So whats the difference if its applied to the html element or the body element?

2 Answers

Brendon Butler
Brendon Butler
4,254 Points

To expand on max's answer. If you were to apply the background to the body and it has a margin applied, it would only fill the body element leaving white space around it.

If you applied the background to the html tag it would fill the entire screen.

If you did not have a margin specified, applying the background to the body would also work. But if you were to modify the background in any way (predefined width, margins, etc.) This would affect the background color/image. And you may not realize when you try to figure out what's wrong with your page.

This is what they meant in the tutorial.

Max Senden
Max Senden
23,153 Points

Hi babasariffodeen,

The <body> is a child element of the <html>. Just like <header> and <footer> are child elements of <html>.

Try making a html document with a <header><body><footer> elements and give them each a separate background color, including the <html>. You'll see that the html's background color overrides the body's once the CSS is in place. An example below:

The HTML

<html>
  <header>aaa</header>
  <body>aaa</body>
  <footer>aaa</footer>
</html>

The CSS

html {
  background-color: lightblue;
}

header {
  background-color: pink;
}

body {
  background-color: yellow;
}

footer {
  background-color: green;
}

Hope it helps! Max