Alpha Transparent background with Image in front

[CliffLandin]

I am trying to create a div that has a alpha transparent background, but contains images. The problem is that the images inherit the transparency as well. I have tried to give them different z-indexes, wrap them in there own div with backgrounds and setting the divs transparency to none and a couple of other things, all to no avail.

Am I just pounding my head against the wall or is there some way to do this?

When in doubt, go flat out!

http://www.soprisinteractive.com

 

[monksnake]

I am trying to create a div that has a alpha transparent background

Why transparent background? I'm not sure what your situation is, but it seems like you could take a picture of that background and set it instead of putting an alpha transparecy filter on it.

The alpha transparecy filters should only be used for foreground items.

<.

 

[CliffLandin]

The background of the div is transparent, not the background to the page. The background of the page that I am trying to work with is an image. The div has a white background so that the text within the div is legible, but you should be able to see the background image through the background of the div.

When in doubt, go flat out!

http://www.soprisinteractive.com

 

[monksnake]

Will that div always be the same size? The div with the transparent white background?

If so, get a screen shot of that div with nothing in the foreground, make that your background. It should look the exact same as if it were a transparent background.

<.

 

[BabyJeffy]

I would use a background image on the div (with repeat-x and y) which is a 32bit PNG (so it works with the alpha transparency filter in IE as well). The PNG would be a solid white 10px by 10px square with alpha transparency set to something like 20% (within the image editing application).

An example of what I am talking about is (kinda) present at

http://www.aol.nl

in the top of the page - the search box. A similar white image with alpha transparency set on the image.

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/blog/

http://www.coedit.co.uk/

[/tt]

What is Javascript? FAQ216-6094

 

[Vragabond]

This will never work. An element that is transparent cannot become opaque again. If you have 50% transparent element, most its children can be is 50% transparent. They cannot achieve 100% opacity anymore.

I would suggest you go with an alpha transparent .png for background.

 

[CliffLandin]

I gotcha. Using the 75% opaque background .png worked fine, but not in IE6. I think I can live with that. Applying any opacity for IE6 makes it completely clear, but I can probably get away with it being completely white.

We shall see.

Thanks for the help.

When in doubt, go flat out!

http://www.soprisinteractive.com

 

[monksnake]

An element can "look" like it's transparent and be opaque.

<.

 

[BillyRayPreachersSon]

Cliff,

Look at the CSS on the aol.nl site Jeff mentioned. We developed it to work in IE by using an AlphaImageLoader filter... so you can still have your 32-bit PNG working fine in both IE and other browsers.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]