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

HTML

Posted by Dan Curtis
Dan Curtis
19,889 Points

Full width background colors with divs inside a fluid grid.

Hi All,

How do you create full width background colours / images to sections of a webpage that break out of the fluid grid?

While in the fluid grid container setting any width to 100% just causes the image / background colour to span 100% of the grid, Not the screen.

For example this site ( http://www.involvio.com ) has the header image full width and then sections with background colours that span the full width.

This seems to be a common thing so I am sure that I am missing something stupid.

Thanks in advance. :)

4 Answers

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Check out this Treehouse Quick on creating full page background images

Dan Curtis
Dan Curtis
19,889 Points

Thanks but that's not within a fluid grid.

I'm looking for something that breaks out of the fluid grid layout to reach the full bleed of the screen.

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

That page you referenced is neither fluid nor using a grid. Their solution was simple, make that image the first element on the page. You can find all of that out my using the inspect element feature of your web browser.

Dan Curtis
Dan Curtis
19,889 Points
Dan Curtis
Dan Curtis
19,889 Points

So is it not possible to achieve that with fluid grids?

Dan Curtis
Dan Curtis
19,889 Points
Dan Curtis
Dan Curtis
19,889 Points

Ok so this site actually does what i want to achieve https://unroll.me/

How can i get the background colours to break out of a grid to span the full width / bleed of the screen?!?

In responsive web design you MUST be able to have backgrounds and images span the full width. What am i not doing?!?