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

Dan Curtis
Dan Curtis
19,889 Points
Posted by Dan Curtis
Dan Curtis
19,889 Points

Background colors and images in fulid grid

Hi All,

When using a fluid grid how do you get div background images and colors to break out of the grid and take up 100% of the viewport.

How do you keep the content within that div to the grid layout.

Thanks!

1 Answer

Nick Pettit
STAFF
Nick Pettit
Treehouse Teacher
Nick Pettit
Nick Pettit
Treehouse Teacher

Hi Dan,

If you need background images to break outside the grid, you'll have to place them out of the grid. For example, let's say the class .container has an explicit width of 960 pixels. In the following example, here's how you'd break out:

<div class="ElementOutsideTheGrid"></div>
<div class="container">
    <div class="ElementInsideTheGrid"></div>
</div>

If you need an element to break out in the middle of the page, you'll need to create two containers, like this:

<div class="container">
    <div class="ElementInsideTheGrid"></div>
</div>
<div class="ElementOutsideTheGrid"></div>
<div class="container">
    <div class="ElementInsideTheGrid"></div>
</div>

I hope that helps! If you need help with a specific code example, please post your code to CodePen and then post the link to the pen here.