Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Cross browser background semi-transparencies

2:04 pm on Sep 18, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:Oct 31, 2005
votes: 0

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.

M Kris

2:54 pm on Sept 18, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 29, 2007
votes: 0

I wrote a site that used transparencies.

Trust me, it's easier not to bother.

4:49 pm on Sept 18, 2007 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Sept 4, 2001
posts: 2297
votes: 100

Trust me, it's easier not to bother.



8:41 pm on Sept 24, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 26, 2004
votes: 0

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.