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

Sean Flanagan
Sean Flanagan
33,235 Points
Posted by Sean Flanagan
Sean Flanagan
33,235 Points

Disillusionment with this course

Hi.

I typed the syntax for both the HTML and the CSS to the letter, but it seems not to work for me the same as it did for Guil. How is it that Guil's browser has a box in the centre of his screen, yet mine is in the top-left corner despite the background-position being center bottom?

3 Answers

Eduardo Mejía
Eduardo Mejía
36,816 Points

Hi Sean! That's because Guil has another CSS file called page-styles.css. I think he has some CSS rules there. Try writing these properties in the .box rule:

.box { 
  width: 600px; 
  height: 400px; 
  margin: 0 auto; 
}

Obviously you have to apply a background property with some color value.

Sean Flanagan
Sean Flanagan
33,235 Points
Sean Flanagan
Sean Flanagan
33,235 Points

Hi Eduardo! Sorry for the late reply, due to work commitments.

Okay my friend, I've followed your suggestion and here's my HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Background Properties</title>
    <link rel="stylesheet" type="text/css" href="css/css_foundations_style.css">
</head>
<body>
    <div class="box">
    </div>
</body>
</html>

Next, my CSS:

.box {
    width: 600px;
    height: 400px;
    margin: 0 auto;
    background-color: rgb(215, 116, 51);
}

The result: a 600px by 400px box in the top middle of the browser, with an orange-brown colour for the background.

Thanks for your help Eduardo.

Sean :-)

Joel Berry
Joel Berry
4,208 Points
Joel Berry
Joel Berry
4,208 Points

Also, for this course, I would recommend downloading the project files zip for each stage of the course, and coding along in Sublime or another text editor, that way you will have any and all files associated with each step/video.