homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Cross browser background semi-transparencies

 2:04 pm on Sep 18, 2007 (gmt 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 Sep 18, 2007 (gmt 0)

I wrote a site that used transparencies.

Trust me, it's easier not to bother.


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

Trust me, it's easier not to bother.




 8:41 pm on Sep 24, 2007 (gmt 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.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved