Welcome to WebmasterWorld Guest from 54.166.224.46

Forum Moderators: not2easy

Message Too Old, No Replies

Cross browser background semi-transparencies

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

5+ Year Member



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

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

WebmasterWorld Senior Member 5+ Year Member



I wrote a site that used transparencies.

Trust me, it's easier not to bother.

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

WebmasterWorld Senior Member 10+ Year Member



Trust me, it's easier not to bother.

Agreed!

Marshall

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

WebmasterWorld Senior Member 10+ Year Member



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.

 

Featured Threads

Hot Threads This Week

Hot Threads This Month