This must be the easiest way to get full support for PNG-transparency in Internet Explorer 6. The technique even works for PNG-transparency in CSS backgrounds. Credit goes to Angus Turnbull for creating this workaround. My hat is thoroughly tipped.
Here’s what you do
- First, put this file in your CSS directory.
- Second, paste this code into your CSS file:
img { behavior: url(iepngfix.htc); } - Enjoy! Really, that’s it.
Transparent backgrounds
As I said, this can be used to make transparent PNGs work on CSS backgrounds as well. Say you have this code:
All you have to do is apply the background behavior to the #header element:
You can do this with every element you’re using PNG-transparency on:
The asterisk also works, but I don’t know what it does to rendering time:
I found this via the Apple site, which demonstrates some beautiful use of transparency, for example on the Mac Pro site (the tower picture), and the Leopard Spotlight Preview page (the big Spotlight icon).
wow cool! :) I can stop changing the background of the png images and coloring it as the real background then! yay! ;) thanks to Angus as well!
Yeah, thanks go to Angus. :)
Very nice. I’ve tried several successful approaches before, but this is the simplest solution by far.
great post Olav. I’ve been looking for that .htc looong time :)
better than writing the code PNG at a time.
thanks.
Disclaimer: your CSS will no longer validate using this technique.
Otherwise, its a really solid way to work with PNGs in IE This isn’t really new, though.
http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html
(link got stripped from last comment)
You’re right John, thanks for adding that. However, I don’t see it as a problem, as it’s a rule only interpreted by IE, and the script itself caterers to the different IE versions automatically.
But then again, I’ve never been as adhering to standards as I should be.
Good works~ many web designer be pleased!
but, I using pngbehavior, almost complete solution.
Any idea how this affects IE7?
Yeah, IE7 applies the behavior rule, but the script filters it out via browser sniffing.
Thanks for posting Olav.
Does it work for both IMG tags and PNG’s loaded via css background images?
(other popular solutions like IE PNG Fix don’t)
One more thing: Does this fix have accessibility issues like the ones described by Thomas Watson in “The IE PNG fix vs. Accessibility” at www.Justaddwater.dk?
No problem, but thanks should go to Angus. :)
Yeah, as I wrote, it also works with CSS backgrounds, just apply the behavior rule to the appropriate elements. That’s really the most amazing part. I’ve never seen support for such backgrounds untill now.
That is indeed a relevant article, as this script uses JavaScript, and won’t work for users without it. So yes, if you have to take that into account, you should use the old DX.imagetransform..etc method. However, I think we’ve come far enough to make the assumption that users have JS (and hey, Apple uses this technique all over their site, so it’s well tested).
By the way, when I said “I’ve never seen support for such backgrounds untill now”, I ofcourse meant support in such a simple way as this. ;) The DX-filter handles backgrounds aswell, but not as gracefully as this script.
Nifty find, won’t bother me none though, not that much a fan of transparency so it doesn’t come up much.
This script may handle css backgrounds but not repeat-y, repeat-x properties.
but *it does* not work with repeat-y, repeat-x properties.
Thanks Steve, didn’t know that.
I’d used this script before and on some instances, it can crash your IE 5.5+ browsers.
But if it’s all good and well, yeah, this is probably one of the easiest way to implement PNG support for IE browser.
Woah! I’ve always known there was a tricky way for doing this!… thanks!!!
Nice… I haven’t tested it thoroughly enough, but does this fix only the gama differences in IE6, or the alpha transparency for 24-bit PNGs as well? I’ve been deleting the GAMA chunk (in 8-bit) with TweakPNG and using filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (javascript) for the 24-bit alpha transparencies.
alvin: Are you sure you’ve used the latest version? Do you mean crash as in “the program crashes”, or that the png’s doesn’t work?
Kevin: I believe the script uses the DXImageTransform technique.
I’m pretty sure that it’s not an accident that MSIE6 only renders PNG alpha channels correctly if you use invalid markup. If it bothers you so much to send proprietary CSS to clients, you can instruct your servers to send MSCSS only to MSIE versions that benefit from it. For example, if you use ASP.NET, http://sean-janus.optionpc.com/me/software/PNGHack/.
From the article:
“The easiest way to PNG support in IE6
This must be the easiest way to get full support for PNG-transparency in Internet Explorer 6. The technique even works for PNG-transparency in CSS backgrounds.”
beautiful and simple.
The problem I have with this (and other) script(s), is when I use a png as a background for a div and then place, for instance, links in that div those links become “untouchable” in MSIE. Like this: http://www.peopleagainst.com/png
To solve this I have to put the background in a different div and then place the content over it in a div with a higher z-index. Is there any other way to fix this or maybe I’m doing something wrong?
Ehan i try it i het a broken image icon (red cross) at the top of the png image, although the png image still shows anyway, any ideas?
“The asterisk also works, but I don’t know what it does to rendering time”
This script kills rendering time if used too many times on one page. I recommend using it on fewer, more important images in your website, then using substitute GIF versions for others. (The fact that IE6 and below ignores anything with !important next to it would be helpful in implementation.)
Sjoerd, I’ve heard that a position:fixed attribute can fix the link problem, though I haven’t tried that myself.
PS: I love Muse. :)
Thanks Brandy, I was worried the asterisk would do that.
And yeah, Muse! :)
One thing to note is that you have to watch your paths as well. If you have your images and stylesheets in separate directories off the web root, you may experience some funniness.
Has anyone made it with css > background-image yet? I don’t seem to fix it. I’ve made a gradient png witch is to overlay different backgrounds. It works in FF, of course, but in IE, njet.
nice, but it does not work very proper if you use transparent background images AND input forms.
see the workaround for this problem here:
http://www.minus3.ch/png_transparency/
How about we just lobby Microsoft to FIX their blasted browsers? They clearly have the processing available in there to make it work - they just need to invoke it when they’re supposed to.
Even this solution, elegant as it is, has its limitations. I’m sorely tempted to put something on my site that says “If the image above has an ugly white background, then get rid of your ugly browser.”
If you change the first line of the HTC to it will be processed by IE renderer 2~5 times faster.
Cheers, Alex
I meant to say to <PUBLIC:COMPONENT lightweight = true&rt; :-)
Wow, thanks Alex.
Thanks, works great, but:
I put a transparent png as a background of <a> - works
using a:hover and changing png image doesn’t work.
Anyone has a fix for this?
Maciek
There is a HUGE error with this. Most images get resized WAY out of shape when this is used! It made my header image bigger then the browser window it’s self!
No error. The image width and height must be set or else you get a different size.