Reply To: Scroll-Over Effect with 100% width elements

[deldalton]

Paulie_D. I have added your bottom: 0; suggestion to the Pen Scroll-over Effect Example. I’ve also changed the picture, as it wasn’t giving an accurate idea of how the rest of the page then interacts with the image.

What you should now see, when reducing the browser’s width, is that the image resizes proportionally (I’ve also noticed that it rides up slightly but I know how to sort that, so that’s not the problem) and although there is no longer a ‘gap’ between the splash container and the content it is still an empty space that I cannot use in the way I would like.

What I’m trying to achieve is to have the content area (the red bit at the bottom) to appear to stick to the bottom of the splash image, while still maintaining the scroll-over effect.

I’m starting to think that it’s not possible to maintain the scroll-over effect.

I may just have to resort to keeping the header fixed, but have the rest of the content scroll under the header.