CSS Transparency in Wrappers

[tomw]

I am working on a site that I need to implement some CSS transparency:

http://tomwindeknecht.com/new/

I need the black wrapper to have transparency (80%), but not the antiqued paper div. Unfortnately, it seems to be applying the transparency to both, even though I only added transparency to the black wrapper.

Does anyone know of how I could fix this?

Thanks in advance,
Tom

[TheDoc]

Using ‘opacity’ will be applied to everything inside that div. You’ll want to use rgba for the background color:

background: rgba(0,0,0,0.8);

[dfogge]

just a little tip to add on to TheDoc’s solution, it’s best to include a fallback for browsers that cant support rgba.

background-color: #000;

background-color: rgba(0,0,0,0.8);

if you absolutely must support the transparent background in old browsers then fallback with a png.

background: transparent url(transparentbg.png);

background: rgba(0,0,0,0.8);

[jamygolden]

Yeah, I wouldn’t recommend the last one :p

I don’t use .pngs for cross-browser transparency support anymore. I’d do something like this (grabbed from CSS3 Please:

.box_rgba {

background-color: transparent;

background-color: rgba(0, 0, 0, 0.8);  /* FF3+, Saf3+, Opera 10.10+, Chrome, IE9 */

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#CC000000,endColorstr=#CC000000); /* IE6–IE9 */

zoom: 1;

}

[tomw]

Thanks to everyone for all your help! :)

[tomw]

Eric – that worked the best for me!

[Author]

Posts