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

Jacob Brech
Jacob Brech
7,224 Points
Posted by Jacob Brech
Jacob Brech
7,224 Points

Background-color and image, little confused..

In the video Guil Hernandez says:

"“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."

But is this really the case? When you apply a background color to the <body> element the background color stretches out on the whole page. Even though you have set the width 70% and margins 0 auto.

Can someone elaborate on this?

Thanks!

2 Answers

deckey
deckey
14,630 Points
deckey
deckey
14,630 Points

Hi Jacob, you can add background color or image to the body element like:

<body background="url of the image">

or with inline styling like:

<body style="background-image:url(someImage.jpg)">

or via css of course. But image size will be 100% no matter what and tile if smaller than the body. If you put different width it actually refers to 'body' not the image, so the body gets scaled. Background attribute is different than img tag which can control size of the image.

If you need a background image with adjustable size, you need to put it within a container as it's background.

hope it helps, good luck!

Deckey

Renee Versteegen
Renee Versteegen
16,408 Points
Renee Versteegen
Renee Versteegen
16,408 Points

What Guil says here is that if you use the body element as your wrapper and you want to add a background color or image to the whole page, so not just the content, you have to select the html element for that. If you want to set the background color for just the content you would select the body element. So if you have set your wrapper width to 70% the other 30% of the page will show the background color you set for the html element.