transparent img over another img

[trine]

Hi!

Hope someone can help me figure out how to do this! I've been trying to do a new site with DW and want to create an effect which is really simple to create with Flash:

Place an image (photo, graphic, whatever) as the background layer and on top place a semitransparent square, i.e. a black square with 50% alpha on which I can write the text I want. The effect is neet - you see the background image vaguely through the semitransparent square. This effect is used in tons of Flash sites but I haven't been able to find any help on how to use when programming in html. I've tried creating the semitransparent square in fireworks and then setting two layers ontop of each other in DW (one in the back with and image and the other layer in front with the semitransparent color) the problem is that the layer turns solid light grey instead of transparent black...

I'd really appreciate any help on how to solve this - I've spent hooooours with no luck?

[drummin]

Hey Trine,

I believe I saw something at this site that might help. It was under the "image map" category.
http://www.cssplay.co.uk/menu/index.html

Hope that helps.
Drummin

[speed]

For the tinted area you can create a PNG image and use it as a background for a <div> this will allow the background photograph to show through the PNG and the text is then contained within the tinted area. Which is exactly what you want.

However this doesn't work on IE as IE doesn't support PNGs properly, there are some JavaScript fixes to make PNG transparency work, see:

http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html
http://koivi.com/ie-png-transparency/

The alternative which works across platforms is to make a 2nd image which is tinted portion of the background photograph, then place this as the background to the <div> containing the text. Although not true transparency it does give the effect, an old example of mine can be seen at http://stuff.tolranet.co.uk/css/sky/sky.html, make the browser window narrow to see the background photo show out both sides.

[weegillis]

I used a cheap and dirty GIF that was fashioned with three muted shades and plenty of white, which is set to transparent. The resulting graphic makes great onion skin to achieve the effect you are looking for. Just scroll the page to see what I mean:

http://www.wdchamber.com/info/

The page is broken, but the effect still works. Maybe someday someone will discover they wrecked another page, who knows?

Here's another one on a page that's still intact...

http://www.wdchamber.com/profiles/wayne_fm.html