Hi everyone,

I am currently working on a website which requires an opaque background for the content that fades with alpha at the bottom to see the picture of the body background. Using a PNG file for the upper background works perfectly and the fade works great until I fill the div with a background-color to hide the body background where the text is.

I thought of using a second div for the transparent background but I need the text from the content div to be able to get on it too instead of pushing it down. I could use a bigger background image to cover the full text and fading its bottom but the contents have different heights and I need it to be dynamic…

Any thoughts or help? Thank you guys in advance.

For people interested, we have decided (due to a close deadline) to simple use a very tall background image so it would still show if the content gets pretty long. But it is just a quick fix and we hope the content will not get too long or the same problem will occur.

I am still looking forward to a better and more reliable way to do this trick.

Thanks