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

Ashley Shay
Ashley Shay
8,664 Points
Posted by Ashley Shay
Ashley Shay
8,664 Points

Question about Grids and Backgrounds

When using a grid layout, what would you need to do in order to make a background color expand past the grid and to the edge of the screen? I'd want most of the site content lined up on the grid, but I'd also like to have a header background color or image, distinct from the body background, that expands the full width of the viewport?

Thanks! :)

5 Answers

Brandon Barrette
Brandon Barrette
20,485 Points
Brandon Barrette
Brandon Barrette
20,485 Points

Apply a background color to the body, create a header holder that has width 100% and has a different color. Then you can place your .container inside the header as well to keep it's width lined up with the width of the main content. 

<div id="header"> /*Use a different background color here */
    <div class="container">
          Put your header content here
    </div>
</div>

<div class="container"> /*Use your body background color here */
        Put your main content here
</div>

<div id="footer"> /*Use a different background color here */
    <div class="container">
          Put your footer content here
    </div>
</div>

Then for your CSS, you should define both header and footer:

#header {
    width: 100%;
    background-color: #0F0F0F;
    margin-bottom: 15px;
}

#footer {
    width: 100%;
    background-color: #FFFFFF;
    margin-top: 15px;
}

Hope that helps!

Riley Hilliard
PLUS
Riley Hilliard
Courses Plus Student 17,771 Points
Riley Hilliard
Riley Hilliard
Courses Plus Student 17,771 Points

You could assign that CSS property to the containing element of the grid you are trying to color the background of. If you are using Bootstrap this would likely be the container with the class of '.row', '.row-fluid', or '. container'. Try using chrome dev tools or firebug to demo the CSS change to one of those elements.

Ashley Shay
Ashley Shay
8,664 Points
Ashley Shay
Ashley Shay
8,664 Points

Not sure I followed that. :) I tried applying a background color to the .container (I don't have .row or .row-fluid), but it applies it to the whole of the grid, not outside of it. Basically draws a huge rectangle around all the content and leaves the body background behind it. I'm using the css for the grid from the project files on working with grids.

Ashley Shay
Ashley Shay
8,664 Points
Ashley Shay
Ashley Shay
8,664 Points

This worked! Thanks so much. I love this place. :)

Brandon Barrette
Brandon Barrette
20,485 Points
Brandon Barrette
Brandon Barrette
20,485 Points

Don't forget to mark the "Best Answer" for other people who may run into your same problem and search the forums!

Ashley Shay
Ashley Shay
8,664 Points
Ashley Shay
Ashley Shay
8,664 Points

Ok, I'm totally missing where I can mark "Best Answer." I just see your name and points, your response, and then the option to comment on the post. Where should I be looking?

Brandon Barrette
Brandon Barrette
20,485 Points
Brandon Barrette
Brandon Barrette
20,485 Points

I think they took it down because they are revamping the system per the e-mail from Ryan this morning. I just noticed it's all missing too. Oh wells. Glad I could help =)