Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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

Posted by babasariffodeen
babasariffodeen
6,475 Points

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
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,177 Points
Max Senden
Max Senden
23,177 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