CODEWITHSUNDEEP
htmlcss
logan m
logan m

Reputation: 37

Make overflow ignore specific child element

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.

Upvotes: 1

Views: 659

Answers (1)

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324610

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');"

Upvotes: 1

Related Questions