IE6 PNG fix – Transparent PNG image support for IE6

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:

  1. Download the DD_belatedPNG Javascript file.
  2. Include the javascript in your website header like this:
    <!--[if IE 6]>
    <script type="text/javascript" src="DD_belatedPNG.js"></script>
    <![endif]-->
  3. Add function calls to DD_belatedPNG.fix() inside the DD_belatedPNG.js file like this:
    DD_belatedPNG.fix('.png_bg'); // argument is a CSS selector

    This will fix the PNG background image for the .png_bg CSS class.

    DD_belatedPNG.fixPng('img' ); // argument is an HTMLDomElement

    This will fix your PNG <IMG/> element.

  4. 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

Web Designer and Front End Developer with a passion for web design, coding, blogging, WordPress and chewing gum. Check out my web design portfolio and follow me on Twitter and Facebook!

Share this post!

Tags: , , ,

  • Share
  • Stumbleupon Cre8ive Commando
    • Share

  1. Aleksandar Tasevski on May 28, 2009

    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.

  2. Nigel on November 26, 2009

    Where do I stick the function calls? In the page header as well?

  3. Nigel on November 26, 2009

    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’);

  4. Cre8ive Commando on November 28, 2009

    @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 … :-)

  5. Joseph McCullough on February 9, 2010

    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.

  6. Cre8ive Commando on February 11, 2010

    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. :-)

  7. Superfly on November 15, 2010

    Thanks for your help on this. I’ve been at it for hours and it won’t work.
    Any chance it doesn’t work on a local server?

  8. Cre8ive Commando on November 15, 2010

    It should work fine locally too. Just make sure you’re targeting the right elements on your page in the function call. :-)

  9. Nick on November 17, 2010

    I have added the javascript callout to my header, added DD_belatedPNG.fix(‘img, .dropdown, h1 span, #header’); to the last line in the javascript file, saved the javascript file to the proper location in my file directory. Still not working?

    I am trying to apply this fix to a backround-image in my stylesheet for a dropdown Spry Menu. Here is the code:

    ul.MenuBarHorizontal li
    {
    margin: 0 1px 0 1px;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: 223px;
    float: left;
    background-image:url(file:///C|/Documents%20and%20Settings/Nick/Desktop/Site/publish/image/blue_bg.png);
    background-repeat:repeat;
    }

    Any advice for me? Do I need to add something because it is a spry menu?

    You can see the site at http://www.revere.nickpanczak.com (this version does not include your fix code, but looks the same when I implement your code)

    Thanks for your help!

  10. Cre8ive Commando on November 17, 2010

    @Nick – Your transparent PNG image is used in the following element: “ul.MenuBarHorizontal li”. So this element will need to be added to your function call like so:

    DD_belatedPNG.fix(‘img, .dropdown, h1 span, #header, ul.MenuBarHorizontal li’);

    Best of luck with your website. :-)

  11. Nice! It is working fine. That means it is clearing those corners and blank spaces of png 24 images. Problem is some times it breaks the layout. I am trying to fix broken layout now. I do not hate ie6, I hate the people who steel use it.

  12. Gaurav Sharma on February 3, 2011

    yes it is very good option but there is some problem with the hover property of css
    the filter option is stop when using it..
    i us it in anchor tag.

    best of luck.

  13. Albert on February 16, 2011

    great help :D Thanks!

Trackbacks

  1. [...] IE PNG fix – Transparent PNG image support for IE – Read [...]


Have your say!