PNG Transparency Fix in IE6
Tags: Beginner
As I was exploring different ways to use Transparent PNG files in some of my designs (Check out Smashing Magazine’s PNG post for some great examples), I had to first find out how to make PNG files work in IE6. As we all know, IE 6 does not fully support transparency.
The .htc Fix
Download the .htc file and specify which element/tag you want PNG support on. To learn more here is an online demo and set up instructions.
The Java Script Fix
SuperSleight
This is probably the best Java Script PNG fix for IE6 that I have come across. Please check out www.24ways.org’s tutorial for a guide on how to implement.
Google Code
I stumbled across this Google Code which was pretty straight forward. The downside of this is that script only fixes images named: *-trans.png. Unfortunately, the transparent background image cannot be tiled (repeated) using background-repeat. Nor can it be positioned using background-position.
Or the CSS Fix
I stumble across a simple technique that worked effectively, which uses CSS and conditional tags for IE, no Java Script involved.
Step1 – HTML
We can start out by creating a new html file and place an empty div tag with a class name “vehicles”.
<div class="vehicles"></div>
Step2 – Style Sheet
Next lets create a style sheet called styles.css and add the following:
body {
background: url(body-bg.jpg); /* Adding base background pattern */
}
.vehicles {
width: 500px;
height: 176px;
background: url(vehicles.png) no-repeat; /* Adding background of the vehicles */
}
Step 3 – IE Style Sheet
Lets create another new style sheet and call this one IE.css.
Now we all know IE hates PNG files, so this is the part where we work the magic.
/* Notice I add the 'html' in front of the class name, I did this so there will no background property conflicts with the other style sheets */
html .vehicles {
background: none; /* Hide the current background image so you can replace it with the filter*/
width: 500px; /* Must specify width */
height: 176px; /* Must specify height */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='vehicles.png');
}
Step 4 – Conditional Comments for IE
This is the final step. Now we will go back to the html file from step 1, and we will call both of the style sheets we just created.
Inside of the <head></head> tags on the top of your file, add the following:
<link rel="stylesheet" href="styles.css" type="text/css" /> <!--[if IE 6]> <link rel="stylesheet" href="IE.css" type="text/css" /> <![endif]-->
*Notice we have the conditional comments for IE6 on the 2nd line, this is where we tell IE6 to use the IE.css style sheet in addition to our regular style sheet.
Conclusion
These were 2 simple ways I was able to pull off the PNG problem on IE6. The good part about this technique is that it is XHTML compliant and it also reduces page weight.
If you have any suggestions, comments, or know of a better way, please give me a heads up!
Related Posts
Author Bio
My name is Soh Tanaka and I am a Los Angeles based designer/front-end developer specializing in CSS driven web design with an emphasis on usability and search engine optimization. I also run a CSS Gallery which is updated daily with the best CSS websites from around the world. Come check it out!
You can learn more about me or 
Follow me on twitter for more updates and resources!
Did You Enjoy This Post?
Subscribe via RSS or by email to get all upcoming tutorials and articles delivered straight to you.
+ Add Comment25 Peeps Have Spoken Their Minds...
this is superb than other bcoz this can worked without javascript
sorry i found filter properties is not a valid css property by w3c css validator.
“i found filter properties is not a valid css property by w3c css validator.” -jitendra
my png is set as background image in my blog but my content becomes unclickable when i use this ,just like the other javascript.
Hey Van, try saving the example page and wrapping a link around it, it should be good to go. Or you can put a sample link of your problem, with the CSS PNG fix, you should be able to link your elements~
Hello!
I am using:
http://www.dillerdesign.com/experiment/DD_belatedPNG/
This script accepts also background-position and background-repeat so I think it’s the best out there!
Hope helps someone!
I very much agree with point47!
I previously used the “.htc” fix listed above from Angus Turnbull (twinhelix.com) on several projects, and generally had good success with it… Except that I’d run into the “not clickable” problem a fair bit.
On my last project, I switched to:
http://www.dillerdesign.com/experiment/DD_belatedPNG/
The main benefits with Drew’s solution are:
1. does NOT suffer from the “not clickable” issue
2. fully supports background-position and background-repeat
Thanks!!
Я, хоть и не ваш постоянный читатель, но всё же выскажусь. На ваш блог попал случайно. Однако нашел много чего нового и интересного. Так что, как говорится, АФФТАР ПЕШИ ИСЧО! :)
Wow mate! nice article ;)
can’t we just all band together and boycott IE? :)
nice post! its helps me a lot! thanks!
За статью спасибо, все по делу, достаточно много кто это уже использует
I used to use twinhelix’s .htc fix but now I am stuck on SuperSleight because it is so simple to implement.
Nice try but it spits pngs all over the top of the site, outside of their bounding divs and outside of the main site code.
They are transparent, just a few hundred px from where they need to be!
hey I used the google code but the problem for image transperancy waas still not solvedm in IE6
Not able to do background image position right. Can anyone help me?
Great article,
We’ve come across most of those fixes after a lot of time of searching and trying. This page is a great collection of the most effective techniques, a very useful resource for web designers. So far, none if the above works 100% perfectly given a complex situation. Still waiting for the ‘perfect’ script, unless IE6 will be history soon.
There are two alternate methods web developers should look at before resorting to Javascript hacks:
http://cubicspot.blogspot.com/2010/01/transparent-png8-is-solution-to-ie6.html
http://cubicspot.blogspot.com/2010/03/pseudo-transparent-24-bit-png-in.html
I’ve used the PNG8 approach with great success. It works very well for small and low-color PNG images. The other approach works really well for high-color images on solid-color backgrounds.
@Osborne: IE6 is guaranteed dead in six years (hooray for 2016).
http://cubicspot.blogspot.com/2010/03/ie6-will-be-dead-in-6-years.html
So, until then, we have hacks.
Love it.. CSS hack is money.. thanks!
curse you IE6 for making a lot of trouble and wasting developers time.. :(
Awesome …. It helps me a lot. Thanks
I prefer using GIFs for transparent icons and IE6. I had performance problems with filters. I’m also using GIFs for semi-transparent images …
http://italez.wordpress.com/2010/06/21/gif-semi-trasparenti-ed-ie6/
For Step 3 of the CSS fix, you should point out that the URL/path of the image should be relative to the HTML document that’s calling the stylesheet and not the stylesheet itself.
Thank you so much for the 4-step tutorial to make images transparent in IE6.I searched for many ways to make it transparent and I found this way more useful and handy,
Cheers,
Mahsa
Nic3 fix……
AlphaImageLoader filter really works….
Speak Your Mind...