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

Can the background image of a div overflow the div without causing scroll bars?

I am coding my design portfolio site, and I have a header and footer image that I need to extend horizontally beyond the div containers. I can't figure out how to this, or how to keep horizontal scroll bars from appearing as the window sizing decreases.

MORE INFO: I'm creating this site to be responsive. The background image I want to appear is 1038px wide, but my footer container can only be 768px wide for the vertical tablet version, because I don't want the scroll bars to appear. I want to be able to set the background image to the footer div for ease of image placement without the div cutting off the image.

Thanks!

2 Answers

Sorry, my mistake.

If you don't set an overflow property on a div it should overflow the div by default. If not or you want to be on the safe side you can set the overflow property to "visible" which causes all contents within the div to overflow it. It's worth mentioning that content that overflows in this way does not affect the page flow so other elements can cover them.

CSS Tricks covers overflows quite nicely http://css-tricks.com/almanac/properties/o/overflow/ and Here's another fiddle showing what I mean http://jsfiddle.net/PATN6/2/

This should do it, it will set the background of the footer div as the image and shouldn't cause scrollbars:

footer {

background-image: url("..path/to/image");

}

However if you want to use an image element instead you can use this which will hide anything that extends outside of the div:

footer {

overflow: hidden; }

I would recommend adding this if you want it to be responsive as it will scale the image down without cutting bits off (however I'm not sure how well this is supported in <IE8)

footer {

background-image: url("..path/to/image");
background-size: cover;
background-repeat: no-repeat;

}

Here's a fiddle showing what I mean http://jsfiddle.net/a98HM/

I'm wanting an image to overflow its div without causing scrollbars.