Make overflow ignore specific child element

Question

I need to put a large cover image at the top of a page. It's wider than my 960px content wrapper so I'll put it outside of that, but I don't want it causing the page to scroll horizontally due to its width. Is there an established way to make a container ignore a specific child when it comes to scrolling?

My first thought was to make it the centered background of a div with 100% width, but the image is dynamic and shouldn't be assigned by the CSS.

I still want the page to scroll horizontally if it gets thinner than the wrapper, and I don't want to scale the image, it should be fixed width. — logan m
– logan m, Commented Jan 20, 2013 at 21:49

Niet the Dark Absol · Accepted Answer · 2013-01-20 17:47:30Z

1

You can set max-width:100% on the image, this will scale it down to fit if it's too big at full size (just make sure that height is either not set or auto)

Alternatively, you can use a background image, but have the "image" part be none in your external CSS. Then, where you would have src="path/to/image.png" in your <img />, instead just put style="background-image:url('path/to/image.png');"

answered Jan 20, 2013 at 17:47

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

logan m Over a year ago

thinking the second might be the best scenario

Collectives™ on Stack Overflow

Make overflow ignore specific child element

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related