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!

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 Foundations Backgrounds and Borders Background Properties

shareyourpeace
shareyourpeace
3,244 Points

My browser output does not show the 'box'. I am at the very beginning of the video.

I am following the video exactly.

The html has a

<div class="box"></div>

The css has

.box {
Background-color:blue;
}

No browser output at all.

I tested by adding into the html <h1> hi </h1>

And into the css

h1 {
color:red;
Font-style:italic;

I get a red italic 'hi' in the output.

I used the below questions and added 'this is a test' into the Div with class = box.

I see the blue div with the text.

But in the video, the screen show a large white border rectangle box. Then the entire screen turns blue when Guil changes the background-color to blue.

Can some explain this please. Thanks.

Sean T. Unwin
Sean T. Unwin
28,686 Points

Hi shareyourpeace,

I have edited your post to format the code for readability. Please read the 'Markdown Cheatsheet` at the bottom of the post comment text area or refer to this thread.

5 Answers

Your box doesn't have a defined height. so unless your box has content inside of it, the box has collapsed.

This will show your box

<div class="box"><h1>hi</h1></div>

This will not

<div class="box"></div>

if you don't want to add content inside the box, you can give it a defined width and height in css and it will display the box.

so if you stated this in your code...

<div class="box"></div>

you can state this in your css and it should show the box in the broswer:

.box{
    width: 100px;
    height: 100px;
    background-color: blue;
}

hope that helps.

Sean T. Unwin
Sean T. Unwin
28,686 Points

Don't use capitals in your CSS attributes.

For example, use: background-color: blue

shareyourpeace
shareyourpeace
3,244 Points

Yes. Thanks. I had figured that out. Your reply showed up with a 42 minute lag on my end.

Glad I could help.

shareyourpeace
shareyourpeace
3,244 Points

I have tried posting the following question 4x. I get a red error message saying I need to include at least one letter or number.

So I am just attaching the question to this post. Thanks for looking.

At point 10:50 in the video, Guil is demonstrating the background-attachment property. He is in style.css The background-image is mike.png

His browser output is the rain.jpg.

What happened ? What was skipped.

Thanks

Could you post the link to the video in this comment area. I dont have a link to get to what your talking about.

shareyourpeace
shareyourpeace
3,244 Points

Thanks again Shawn http://teamtreehouse.com/library/css-foundations/backgrounds-and-borders/background-properties-3

It is in Frontend Web Development, backgrounds, the first video at time 10:50.

Okay. Finally see what your talking about. Basically he did skip a step and didn't add the image to the back because he wanted to focus on background attachment and the effects. So due to editing you don't see when he added the background image to the class, probably because he did that first to setup the lesson and then started working on .box second. Doesn't make sense to do the same thing twice when he already taught how to include a background image in css first. So it's cut out for repetition sake. Rules still apply, if you want the image to show up in the background in css, you have to include it as such:

.box{
    background-image:url("path-to image/image_name_here.jpg"); }

From there you can add and do the different background properties he was talking about.

Hope that helps.