Transparent Backgrounds

==

It’s Magic!

==

I’ve written before about alpha transparency in PNG images. I’ve always wanted to use the effect to give a semi-transparent background to divs on my site. Unfortunately, since IE can’t render PNGs properly, the appearance of the site would break for 90% of all Internet users.

I’ve been designing a new site for the Crimson Nights events that UPC sponsors, and I really wanted “cool factor”. So I went snooping and found this. It’s a blog entry that describes a proprietary technique to load a PNG with full alpha-transparency in IE. It looks like this:

bq.. .tinted {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true, sizingMethod=scale, src='black75p.png');
}

[Note: everything from “filter” to the semicolon should be on a single line.]

p. Unfortunately, it is only supported by IE. To get other browsers to display the background, you simply use the standard background property, like this:

bq. .tinted {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true, sizingMethod=scale, src='black75p.png');
background-image: url('black75p.png');
}

Unfortunately, as soon as you apply the standard background property you end up undoing all the hard work it took to convince IE to display the graphic properly. To overcome this difficulty, we need a way of passing something to all browsers except IE. Since IE is not compliant with standards, the solution is not very difficult. We simply add an attribute selector to the tinted class. Since all of our tinted divs will use the class attribute, our new selector will always be applied in browsers that support attribute selectors, thus excluding IE. The final code looks like this:

bq.. .tinted {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true, sizingMethod=scale, src='black75p.png');
}

.tinted[class] {
background-image: url('black75p.png');
}

p. Since all the other major browsers (Mozilla, Mozilla Firefox, Netscape, and Opera) can read the second selector, they will apply the background image with full alpha-transparency and ignore the silly image filter that IE is dependent upon.

I’m excited to unveil the new site. I think I acheived the “cool factor” I was looking for.

  • link to the page?

  • Joey

    The site hasn’t gone live yet, so I probably shouldn’t link to it here, yet. When it goes live you’ll be the first to know.

  • Here is another resource for implemengint PNGs.

    http://www.allinthehead.com/retro/69

  • Joey

    *Update:* For some reason this effect isn’t working in Netscape 7.1. That is to say, the transparency looks great, but it’s not positioning the box correcty. If anyone knows how to fix this, let me know. Thanks!

  • Hmm, it does not seem to work in IE Mac v. 5.2

    Oh well….

    I think I am going to cry…

    Works in Safari though…

  • Buz

    I distinctly remember offering you a solution for this kind of thing for hrwiki about a year ago. Granted, the solution I offered was for IMG tags with SRC attributes that had a .PNG in them, but extending it would not have been impossible. I have used the basic application without hitch on forum.buzdor.com for over a year now. Let me know if you want me to figure out how to get it to work for backgrounds. Of course, we all hope IE7 will work with PNGs properly!