I have a div with a background image that I want to act as an overlay on the rest of the background. If content overflows enough, I want the rest of the (large) image to be visible when you scroll.

I can accomplish this by absolute positioning and setting the height/width to the images dimensions, but then it causes the body tag to overflow.

If I set it to be fixed position, then it gets clipped properly, but when I do scroll the position is... fixed.

  • can't really get my head round what you're trying to do, can you show us what you've got so far? sounds like you need to nest the divs a bit more.... Tony Crockford over 7 years ago

1 answer

Kau-Boy 110

You might try max-width and max-height instead of fixed width and height. Than the div will not cause the body to overflow.

Answered over 7 years ago by Kau-Boy
  • if I use <code> width: 1212px; height: 1000px; max-width: 100%; max-height: 100%; </code> (those dimensions are the dimensions of the image) Then it works great except for when the content DOES overflow, because the 100% is the viewport size not the parent element size. I need it to be the size of the viewport it larger than the size of the content div, and vice versa. I'm trying to avoid using JS Josh Fee over 7 years ago