PNG Hack/Fix for IE 6

For CSS background-images

.yourselector {
       width:200px;
       height:100px;
       background: url(/folder/yourimage.png) no-repeat;
       _background:none;
       _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/folder/yourimage.png',sizingMethod='crop');
}

Cannot be used with repeating, needs fixed with and height.

For inline HTML images

img, .png {
       position: relative;
       behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
       this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
       this.src = "images/transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
       this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
       this.runtimeStyle.backgroundImage = "none")),this.pngSet=true));
}

This requires a 1x1px transparent GIF image

Comments

  1. User Avatar
    Fran
    Permalink to comment#

    great piece of code. remembered my bookmark i set a few days ago…. now i need this piece of code for a project. thank you!

  2. User Avatar
    daniel
    Permalink to comment#

    validator??

    • User Avatar
      John
      Permalink to comment#

      The hacks are not valid CSS, but since the hacks are only needed for IE<7 you can use conditional comments, so the validator and browsers with PNG alpha transparency support don't see the hacks.

      You can do this by putting the IE PNG Fix hacks in a separate stylesheet (or in a CSS together with other hacks for IE<7) and then link to it in your HTML like this:

      IE<7 will see iepngfix.css and fix your PNG's, while all others (including validators) see it as HTML comment and don't read it, so your page validates fine.

    • User Avatar
      Hilbrand Edskes
      Permalink to comment#

      The AlphaImageLoader hacks are invalid CSS, but since these hacks are only for IE 5.5 and IE 6 you can use conditional comments, so the validator and browsers with PNG alpha transparency support don’t see the hacks.

      You can do this by putting the IE PNG Fix hacks in a separate stylesheet (or in a stylesheet together with other hacks for IE 5.5 and IE 6) and then link to it in your HTML like this:
      <!--[if lt IE 7]>
      <link rel="stylesheet" type="text/css" media="screen, projection" href="iepngfix.css">
      <![endif]-->
      IE 5.5 and IE 6 will see iepngfix.css and fix your PNG’s, IE 5.0 skips it because it doesn’t know what AlphaImageLoader is, while all other browsers and all validators see it as HTML comment and don’t read what’s inside, so your page will validate fine.

  3. User Avatar
    mysticpixels
    Permalink to comment#

    Im getting an overlay container over my images … which indicates a missing image, over the png images that i ve inserted. The transparency of the png is getting removed anyways. But this overlay is creating an issue

    • User Avatar
      John
      Permalink to comment#

      Then this.src = “images/transparent.gif” can’t be found.

      For inline HTML images “images/transparent.gif” needs to be a 1×1px transparent GIF image. Then the image overlay becomes invisible, which solves your problem.

      I had another problem with this: with PNG backgrounds links who were originally on top of the PNG background image get behind it after applying this hack (because the overlay of the hack gets on top of the links).
      I solved this by adding an extra (IE<7 only) empty DIV (class="header-ie") before the original DIV with the PNG background and the links (class="header"), which I gave the same width and height as the original DIV. Then I set the background of the original DIV to none for IE<7 and applied the above filter hack to the extra IE<7 only DIV and positioned it absolute and the original DIV relative, so the original DIV with the links got on top of the IE<7 only DIV with the PNG filtered background.
      Then finally the links were clickable again, while PNG transparency also worked in IE<7.

      This resulted in the following CSS:
      .header-ie,
      .header {
      _width: 800px;
      _height: 30px;
      _background: none;
      }
      .header-ie {
      _position: absolute;
      _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/header.png',sizingMethod='crop');
      }
      .header {
      _position: relative;
      }

  4. User Avatar
    Kirk
    Permalink to comment#

    Looked into using this technique recently and when used in conjunction with gzip the browser fails to load the page.

  5. User Avatar
    Pavel
    Permalink to comment#

    I use DD_belatedPNG script for my site! It works great for me. That script support repeated backgrounds as well inline images. And by the way that solution included in wordpres plugin called HITS- IE6 PNGFix

    • User Avatar
      Antonio Felix
      Permalink to comment#

      I 100% agree with Pavel, DD_belatedPNG is EVEN BETTER than this option here!

      Reasons:

      – Works perfectly for IE 5.5 AND 6.

      – You do not need to create extra files like a 1×1 image (not that’s a real problem, though. But it’s still a plus to consider)

      – You CAN use it for repeated background. I use it for a pattern of dots on top of a image, and it works perfectly.

      – Doesn’t generate any extra loading time for your website. At least on the tests i’ve made so far.

      – All you need to do is call the JS file by the script tag:

      And then you call the function by defining the NAME of a class you want to use as “fixer”, like this:
      DD_belatedPNG.fix(‘.pngfix’);

      Then let’s say you have a div here with a png image as background:

      So, you make it like this:

      And you’re done! the script does the rest.

      I know i sound like a salesman, but opensource life-savers scripts deserve their importance as it made my job way easier. I think this should be added as a hint here.

  6. User Avatar
    chris
    Permalink to comment#

    This does not work with image resizing which is sad.

  7. User Avatar
    Michael
    Permalink to comment#

    this solution works for me, but only on non-interactive placement of images.

    to wit, image-replacement roll-over links work fine, but I’ve been unable to have the :hover image show

    thank’s again for keeping this page alive chris, as it’s still one of my ‘worn’ bookmarks.

  8. User Avatar
    ashok
    Permalink to comment#

    this solution works for me, but what if , when we use that png image as a background, in this case whats the solution????

  9. User Avatar
    Brain
    Permalink to comment#

    New to much of this. Using that script, “yourimage.png” is the good png image as PNG 32, PNG 24 or PNG 8? Exactly what image do I use there? I know the .selector to use according to where the PNG is located.
    Additionally, do I do this for every image?

  10. User Avatar
    santhosh
    Permalink to comment#

    this code is very useful for me to fix png images background in ie6 browser, thanks for the solution

    • User Avatar
      Manoj
      Permalink to comment#

      Hi santosh,can you please help me by providing the procedure to use this script for css backgroung images.For me it is working for html elements.Am facing problem in fixing for css background images,Thanks in advance!

  11. User Avatar
    About

    What about not extra class and css-styling.
    Just converting the 24-bit pngs to 8-bit pngs with alpha transparency for IE6 too .

    A neat Tool for that is ImageAlpha a GUI for pngnq and pngquant (that does the magic).
    The free app can be found here:
    http://pornel.net/imagealpha
    (only osx)

  12. User Avatar
    Manoj
    Permalink to comment#

    Thanks for this script as it made me cool when facing problem with ie6.but when i tried this script for css background images it doesn’t work properly.No change has happened.Can you please help regarding this which will make my things easier,thanks once again in advance

  13. User Avatar
    Tesser
    Permalink to comment#

    this code is very useful for me to fix png images background in ie6 browser, Thank you very much :)

  14. User Avatar
    Hamza Khan
    Permalink to comment#

    If you give any real time example using this code then for newbies its pretty usefull.

    thanks
    hamza khan

  15. User Avatar
    sd
    Permalink to comment#

    i don’t know why, but it doesn’t work for me.

    i’m using the png as a background but it doesn’t work.

  16. User Avatar
    ad
    Permalink to comment#

    clever…clever…clever! Thanks!

  17. User Avatar
    Will
    Permalink to comment#

    Applying this style to a div that contains an input box or textarea makes it so that you cant click inside and enter text. I thought I could fix it with z-index but no such luck. Its either an ugly input form or a useless input form!

  18. User Avatar
    Ben
    Permalink to comment#

    CSS background image example works great.

    If it’s not working for anyone:

    The path to the image cannot be relative. Example: if it starts with “../” as many CSS background image URLs do it will not work. Ensure yours starts with “/”.

  19. User Avatar
    bharadwaj bangalore
    Permalink to comment#

    Sorry Guys, Nothing works. plain flop show. Believe me if I’m HEAVILY ARMED, I would go and kill every single developer at Microsoft Campus WORLDWIDE!!! :-(

  20. User Avatar
    suman
    Permalink to comment#

    i use this code in my css but not working for me though i am using in ul and it has position:absolute property on it.

    _background:none;
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’/folder/yourimage.png’,sizingMethod=’crop’);

    any suggestion really helpful

  21. User Avatar
    Shrek
    Permalink to comment#

    Well, I can’t find any of the tricks found online for IE to help me. The IE doesn’t show the image of my page properly, actually it show them all over the place, but not fixed unto the margin as supposed to. Any help please.

  22. User Avatar
    Sushant
    Permalink to comment#

    thanx…. it worked !!!

  23. User Avatar
    robert
    Permalink to comment#

    all of you are smart… IE is stupid… windows is more stupid that cannot see this problem

  24. User Avatar
    P FRANCIS XAVIER
    Permalink to comment#

    excellent . It works for me

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag