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

Philip Kroupoderov
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Philip Kroupoderov
Front End Web Development Techdegree Graduate 21,641 Points
Posted by Philip Kroupoderov
.a{fill-rule:evenodd;}techdegree seal-36
Philip Kroupoderov
Front End Web Development Techdegree Graduate 21,641 Points

Why is the body background color being applied to the entire web page (in my code)??

Guil said that a background color or image shall be applied to <html>. Also, I realized that the content all together makes up the size of the <body>, so if there's no content, the <body> has no size. So could somebody please explain, when I set a background-color property to <body> which has no content at all, then the entire viewport of the webpage turns to that color?? Here's my code for some clarity:

https://w.trhou.se/9t122eqhy8

I added a border to body, but the background color expands beyond the border?!?!?

3 Answers

Alex Brasovan
Alex Brasovan
5,344 Points
Alex Brasovan
Alex Brasovan
5,344 Points

This got me curious as well so I went to Stack Overflow for help. I've found that, basically, unless you specify different values for either "background-color" or "background-image" of the <html> element other than the default ones ("transparent" and "none", respectively), browsers will use the background styles of the <body> element for the entire page, i.e the <html> element.

You can read more here: https://stackoverflow.com/questions/17806691/background-color-of-body-tag-applied-to-the-whole-html

James Akpan
James Akpan
4,529 Points
James Akpan
James Akpan
4,529 Points

All answers here are correct. You can look at it this way. If water is poured all the way from your head, it is very well going to touch your stomach and even drip to your foot, but when water is splashed on your tee-shirt it doesn't get to your head. I hope you get this right

Max Weir
Max Weir
14,963 Points
Max Weir
Max Weir
14,963 Points

So could somebody please explain, when I set a background-color property to <body> which has no content at all, then the entire viewport of the webpage turns to that color?? Here's my code for some clarity:

  • This is how all browsers render a background colour on the body tag, the viewport (the size of your browser or mobile device browser) is governed by how big your actual browser window is. It doesn't matter if its small or to infinity, the background colour will always fill the space available.

I added a border to body, but the background color expands beyond the border?!?!?

  • This is because you have no css resets in place, these are ALWAYS required when developing websites. Various browsers add their own spacing values which can cause layout issues and inconsistencies throughout your website. I recommend watching this TreeHouse video explaining resets https://teamtreehouse.com/library/applying-normalizecss-browser-reset-css the css is well documented with explanations of what each reset does.