Max Height 100%

I know all about the problems with this I just cant get my head around.

Its been years since I have had to ask a CSS question but for this I definately need some help.

www.invision-gaming.co.uk is the page.

I am trying to blank out the whole page.

This is what I am trying to do.

www.invision-gaming.co.uk?translucent

As you can see the 100% is obviously only the height of the browser (whcih is should be). How can I stretch it to the full length of the scrollable overflowed body

 

Forget the 100% of anything, and lose the #translucent div. Do this:

#background {
    opacity: .2;
    }

Code (markup):

cheers,

gary

 

Not all browser support this sadly (well the last time I check they didnt) anyway Pam made a good post about this: http://weblensblogs.blogspot.com/2006/04/two-techniques-for-css-transparency.html

 

The OP had the variety of opacity properties for the different browsers. My point was on which element to put the property.

gary

 

I set that and it worked well, atleast all but the problem where it makes the body image show, If I have it like that I would need a black background behind it, so that the opacity looks correct and the bg.gif isnt display as it is.

 

Just understand that the opacity property affects the element it is applied to and all descendants of the element. You should be able to give body a black or dark gray bg color and apply opacity to a wrapper div that contains the page. At 0 opacity, nothing would be seen but black. As opacity rises, more content would become visible.

cheers,

gary