Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Kyndel Dollison
Kyndel Dollison
3,109 Points

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/

Kyndel Dollison
Kyndel Dollison
3,109 Points

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