Cross browser background semi-transparencies

[madk]

Does anyone know of a good solution that will allow for semi-transparent backgrounds in both IE and Firefox? I'm looking just to use a solid color for the bg but be able to still see what is underneath it.

I have found a few solution but they seem to be browser specific. Any help would be appreciated.

Thanks,
M Kris

[Dabrowski]

I wrote a site that used transparencies.

Trust me, it's easier not to bother.

[Marshall]

Trust me, it's easier not to bother.

Agreed!

Marshall

[Robin_reala]

Fair enough, but not especially helpful :)

Ideally we'd all be using rgba() colour notation but in the absence of browser support we're back down to trusty alpha transparent PNGs. Now, these are natively supported by everything that's not IE5 or 6, but leaving those guys aside for a minute here's what you do:

1) Make your alpha transparent PNG in the editor of your choice. Make sure it's at least 64x64 pixels to avoid a crasher in IE5 on the mac (not that anyone uses it, but you wanted cross-browser compatibility :))

2) Take your element and apply your PNG as a tiled background image, like so:

div { background: url(my_png.png) repeat; }

Easy! So, just IE5 and 6 left. Luckily for IE5.5 and 6 there's an easy-ish workaround. For 5.0 you're shafted, but hopefully that doesn't fall under the remit of cross-browser compatibility. You can always fall back to a net-curtain gif or equivalent. So:

* html div {
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='my_png.png', sizingMethod='scale');
}

Yeah, I know. But at the end of it, you get your translucent background. To explain, first we use a '* html' hack to show only to IE5&6. You could use conditional comments and a separate stylesheet if you wanted. We then remove the normal background as it's not needed and run the whole thing through MS's horrific-but-useful filter system, and importantly specify sizingMethod='scale'.

Hopefully that explains everything you need, but reply back if you need more help.