Transparent backgrounds/Opaque Content How to have opaque content insi

Opaque Nested Div

[stoic]

I have searched around for a way to have a nested div have opaque content and I just wanted to post my solution which works for mozilla, theres some positioning issues with IE, maybe someone can post fix

What I did was set and position a background image for the whole page

background-image:url('background.jpg');
background-attachment: fixed;
background-repeat:no-repeat;
background-position: 75px 100px;

Then I opened background.jpg in adobe photoshop, created a new layer over the top of it and filled it with the solid color that I want to be transparent, in my case black, then move the opacity of top layer to desired level. So now you should see the background image behind the top layer, save the image as background2.jpg

then for the div you want to be transparent set and position background2.jpg the same as the background for the page

background-image:url('background2.jpg');
background-attachment: fixed;
background-repeat:no-repeat;
background-position: 75px 100px;

If it turns out that you have some whitespace from positioning the background image in the dive then go back to Adobe and use the color dropper to pull the color of the transparency and get the webcode and set the div background color to it. In my case

background-color: #2A0000;

This is how i accomplished a transparent div with an opaque nested div. If I figure out how to accomplish this with IE I will post a followup, otherwise if you know please post

Here's my page as an example of it at work <snip>

[edited by: SuzyUK at 12:15 am (utc) on Dec. 6, 2009]
[edit reason] No links, please see ToS and Forum Charter [/edit]

[stoic]

I forgot to mention that the easiest way ive found to overcome IE incompatibility is to serve IE a different style sheet. Right now I dont know if the fixed property applies in IE divs, its acting like it doesnt

[swa66]

There are all sorts of cases where faking it using multiple images (or even collapsing it into one image) doesn't work.

The proper mechanism to allow to have translucent backgrounds while keeping the content opaque is to use the rbga and/or hsla colors as background.

See [webmasterworld.com...]

IE (none of them) supports this, no big surprise.

[stoic]

Thank you, ill check that out, what sort of case ? older browsers ?