Tuesday May 26, 2009 
Getting transparent PNG images to display properly in IE6 has always been a problem for web designers. There are many different ways of fixing this problem but one of the nicest and lightest ways to fix the transparent PNG problem in IE6 is by using DD_belatedPNG. This lightweight but powerful Javascript library adds Transparent PNG image support to IE6 and is only 5.5KB in size so it won’t have a large impact on your website’s loading time. It’s simple to set up and it will fix CSS background-images as well as <IMG/> elements.
Features of this PNG fix:
- It will fix PNG images that are used as the SRC of an <IMG/> element.
- It will also fix PNG images that are set as a background-image in CSS.
- For a CSS background PNG image, background-position and background-repeat work as intended.
Setting up the PNG fix:
It’s quite simple to set up this PNG fix on your website. Simply follow these steps:
- Download the DD_belatedPNG Javascript file.
- Include the javascript in your website header like this:
<!--[if IE 6]> <script type="text/javascript" src="DD_belatedPNG.js"></script> <![endif]-->
- Add function calls to DD_belatedPNG.fix() inside the DD_belatedPNG.js file like this
:
DD_belatedPNG.fix('.png_bg'); // argument is a CSS selectorThis will fix the PNG background image for the .png_bg CSS class.
DD_belatedPNG.fixPng('img' ); // argument is an HTMLDomElementThis will fix your PNG <IMG/> element.
- You can even roll all your fixes into one statement like this:
DD_belatedPNG.fix('img, .dropdown, h1 span, #header');
That’s it, your transparent PNG images should now render properly in IE6! This is a great light weight PNG fix that should satisfy most web designers needs. This PNG fix does have a few limitations that can be seen in more detail at Drew Diller’s website.
type="text/javascript"
Adham Dannaway
Yep, that's me. I'm a Web Designer and Blogger from Sydney Australia with a passion for noodles, beer and design. Check out my other sites: Mac or PC, illumin8 Design
I have spent to much time in searching for the perfect PNG Fix, and this is the best of all, I use it in every project.
Where do I stick the function calls? In the page header as well?
I’ve put this in the header of default.php, uploaded the js but it doesnt seem to be working.
DD_belatedPNG.fix(‘#header #logo’);
@Nigel, you should stick the function call inside the DD_belatedPNG.js file at the bottom of the file. Be sure to separate each element with a comma like this:
DD_belatedPNG.fix(’#header, #logo’);
That should do the trick …
[...] IE PNG fix – Transparent PNG image support for IE – Read [...]
Usually if you can just be clever with photoshop and image positioning, you don’t have to worry about actually making an image transparent. I try to avoid it as much as possible. I prefer the puzzle piece approach.
In certain cases transparent PNG’s can’t be avoided. We won’t even need to worry about PNG fixes once IE6 is out of the picture. I look forward to that day.