Welcome to the Treehouse Community
Looking to learn something new?
Kyndel Dollison3,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.
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:
However if you want to use an image element instead you can use this which will hide anything that extends outside of the div:
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)
background-image: url("..path/to/image"); background-size: cover; background-repeat: no-repeat;