Webmasters Stack Exchange is a question and answer site for pro webmasters. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

How do I use transparent PNGs in IE6? I have a corporate app that must use IE6 and must use use PNGs, but the transparency all comes through as a pale white colour.

share|improve this question
This question was asked and answered on Stack Overflow: stackoverflow.com/questions/697682/ie6-png-transparency – Sean Moubry Jul 8 '10 at 22:46
up vote 7 down vote accepted

There is a jQuery plugin for it here, or the following script also does a good job (just call it in your <body onload="">;

function fixPNG(){

    var arVersion = navigator.appVersion.split("MSIE")
        var version = parseFloat(arVersion[1])

        if ((version >= 5.5) && (version < 7) && (document.body.filters)) 

           for(var i=0; i<document.images.length; i++)
              var img = document.images[i]
              var imgName = img.src.toUpperCase()
              if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
                 var imgID = (img.id) ? "id='" + img.id + "' " : ""
                 var imgClass = (img.className) ? "class='" + img.className + "' " : ""
                 var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
                 var imgStyle = "display:inline-block;" + img.style.cssText 
                 if (img.align == "left") imgStyle = "float:left;" + imgStyle
                 if (img.align == "right") imgStyle = "float:right;" + imgStyle
                 if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
                 var strNewHTML = "<span " + imgID + imgClass + imgTitle
                 + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
                 + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
                 + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
                 img.outerHTML = strNewHTML
                 i = i-1

share|improve this answer
+1 jQuery really can be used for everything... Who knew. – Evan Plaice Jul 8 '10 at 22:40

IE6 supports transparent (but not translucent) PNG's out of the box. The PNG just has to be saved in the PNG8 format. If all you need is a transparent background and not a blending effect you don't need any code. Just save as PNG8.

share|improve this answer
That's a very good point. – George Edison Jul 15 '10 at 20:28
I didn't know this - thanks. Neither did our graphic designers, obviously. – Mark Henderson Jul 15 '10 at 23:01
Graphic designers shouldn't have to think about browsers (I wish!). – Gareth Farrington Jul 17 '10 at 3:49

24 ways has a well-written article on this issue:


share|improve this answer

If you're OK with GIF-like transparency (in IE6 only), then use PNG8+Alpha (paletted, but with semitransparencies).

It gives full alpha in all other browsers. Does not require slow and finicky DX Filters (on which all IE6 PNG24 fixes are based on).

Fireworks and pngnq/pngquant can save this format (I wrote Mac GUI for them).

Adobe Photoshop is the only notable software that doesn't support it, but you can export PNG24 and then convert it.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.