Christopher Schmitt

designer, web developer, author, strategist, dreamer

Working with the web since 1993, Christopher Schmitt directs Heatvision.com, Inc., a small new media publishing and design firm. The author of several books, including CSS Cookbook and Photoshop in 10 Simple Steps or Less, Schmitt is also a contributor to many web development magazines.

FROM THE ARCHIVE

PNG Transparency for Internet Explorer (IE6 and Beyond)

7 years ago

Like GIFs and JPEGs, PNG images are ideal for web use. Like GIFs, the PNG is great for displaying small images with few colors, like logos and icons. Also, PNGs sport a few advantages over GIF images. Most notably, they support alpha transparency.

What is alpha-transparency? GIF files are only capable of displaying a pixel as either completely transparent or completely opaque: this is known as binary transparency. When an image contains alpha layers, however, parts of an image can be partially transparent. You can specify a level of transparency from 0 to 255. Below is an image with layers of varying transparency:

PNG with transparent layers

PNGs thus have the potential for creating some interesting effects on a web page, like translucent background images and drop-shadows. But despite their advantages over GIFS, PNGs aren’t nearly as popular as GIFs web design, primarily because of the impression that PNGs don’t enjoy wide browser support.

This view on PNGs is a bit of a misconception.

While Internet Explorer for Windows 6 (IE6) and previous versions of IE don’t support PNGs’ alpha-transparency feature, all popular browsers can display PNGs.

While IE6- doesn’t explicitly support alpha-transparency out-of-the-box, if you will, there is a workaround that ensures PNG’s cross-browser compatibility.

Microsoft has a plethora of proprietary visual filters and transitions that are available to IE4+. These filters are designed to apply various multimedia affects (transition wipes, light effects and so on) to images in a web page that are viewed with IE. One of these image filters — AlphaImageLoader — lets you display a PNG with alpha-transparency in IE6.

You can employ this filter within the HTML of your page by creating a div element and embedding into it a bit of CSS:


<div style=”position:relative; height: 188px; width: 188px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader 
(src='images/image.png',sizingMethod='scale');”></div>

The key property here is the filter property. While filter is not valid CSS, it does allow you to apply the AlphaImageLoader filter to the image specified in the parentheses. However, since it isn’t standards-compliant, you may wish to apply this property only as needed (i.e., only when the page is being displayed in IE6-).

By combining this method, developers can build rich image-based designs with alpha transparency like they would for modern browsers like Safari, Firefox, and Internet Explorer 7 that all supports PNG alpha alpha transparency natively.

How to Include PNG Transparency in IE6

One available method for doing this is employing Angus Turnbull’s .htc script:

  1. First, download the .htc script at TwinHelix Designs. HTC is a
    scripting language
    only usable by Internet Explorer (because it was created by Microsoft) and this specific script contains applies the AlphaImageLoader filter to all images within a web page.
  2. After downloadign the script, upload the script to your Web server.
  3. Then, create (or download from TwinHelix) a blank gif file. This image file is 1×1 pixel with the color set as transparent. (Back in the 90s, these were called these gems “single pixel GIFs“). Within the .htc script, change the line that references the blank.gif file so that it points to the gif’s location on the server.
  4. Create a separate CSS file (we’ll name it ie.css), and include within in the following single line, referencing the location of the .htc file:
    
    img { 
     behavior: url(iepngfix.htc); 
    }
    
    

    The behavior property let’s you attach a script to some selector (in this case, all img elements). So, this CSS file attaches the .htc file to all of your images, thus applying the desired filter effect to every image within a web page.

  5. But, we only want to load this CSS file when the page is viewed in IE6-. To do this, just add the following conditional comment to your page’s header:
    
    <!--[if lte IE 6]>
    <link rel="stylesheet" type="text/css" media="screen" 
    href="ie.css" />    
    <![endif]-->
    
    

    Conditional comments like these are understood by IE. What the comment says is, “if the browser is IE6 or below, then read the lines within the comment tags. Otherwise, ignore them.” Conditional comments provide a convenient way of applying IE-specific HTML or CSS. Here, the ie.css stylesheet loads only if the page is displayed in IE6-, letting you apply the non-compliant CSS only when it’s absolutely necessary.

While a rather convoluted way to get transparent PNGs working in your web pages (although less convulted than my previous method), it does provide a method that is as standards-compliant as possible, giving you the freedom to include the beauty of semi-transparent layers in your designs.

See What Others Have Said

48 Responses to “PNG Transparency for Internet Explorer (IE6 and Beyond)”
  1. James Says:

    October 30th, 2007 at 4:55 pm

    Hmm.. This tutorial is almost carbon-copy from the book “CSS Mastery” by Andy Budd.

  2. Christopher Says:

    October 30th, 2007 at 5:26 pm

    @James: That’s weird. I do own the book–as I do own several books on CSS–but I haven’t looked it at in quite some time. If there are similarities, they are unintentional–but not surprising as this is a common technique.

  3. Aaron Says:

    October 30th, 2007 at 5:37 pm

    Still what bothers me about PNGs is the color difference in browsers. Just pull up apple.com in Safari and compare it to Firefox. The tabs are faded looking in Firefox. Ever seen a fix for this?

  4. Kevin Says:

    October 30th, 2007 at 6:27 pm

    A better way to do it would be to tell the person to upgrade to IE7 or better yet, Firefox lol.

  5. Peter Gasston Says:

    October 30th, 2007 at 6:48 pm

    I’ve never been able to get the .htc fix to work for me; whether that’s down to bad implementation or browser inconsistencies, I don’t know.

  6. Angus Turnbull Says:

    October 30th, 2007 at 7:05 pm

    Thanks for the mention, I’m glad that you’ve found it a handy fix! A few random pointers:

    1) If you have IE6 installed along IE7 in “standalone” mode there are often problems with conditional comments not working. So don’t panic if your PNGs turn opaque if you use CCs, they’ll probably work just fine in vanilla IE6 :). Alternatively, the script ships with a JavaScript-based activation method that dynamically creates a stylesheet rule in IE5.5/6.

    2) Colour differences are due to the gamma value, you can try removing that from the PNGs if you want!

  7. Aaron Says:

    October 30th, 2007 at 7:39 pm

    I’ve never had the HTC hack work consistently. The worst is when refreshing a page and I have my images different sizes with each refresh.

  8. bill h Says:

    October 30th, 2007 at 8:53 pm

    Aaron –

    http://hsivonen.iki.fi/png-gamma/

    That will help with the color differences.

  9. Nils Says:

    October 31st, 2007 at 3:36 am

    @Aaron: Or you try this freebie (for OSX): GammaSlamma
    http://tinyurl.com/yplfoj

  10. Franck Says:

    October 31st, 2007 at 4:33 am

    Don’t you think it is a bit stupid to fix all IE6’s bugs ? It’s much more work.
    If designers and developers had never tried to correct IE6, maybe people would have start tu use another browser. I mean that it is not our job to fix that software.

    However, it’s nice to have these solutions but personaly I won’t use them.

  11. Enrique Says:

    October 31st, 2007 at 4:33 am

    Hi all, and thanks Christopher. I really like this technic but I have one important problem when I use it on background. IE6 don´t repeat the PNG on background, why?.

    This is my test, look this.
    http://ervdesign.net/archivos/png/demopng.html

  12. Tor Løvskogen Says:

    October 31st, 2007 at 4:39 am

    I usually just put the alpha-hack inside my CSS, compliant CSS or not – doesnt matter that much. But is this method just for content images, and not graphic?

  13. Rebeca Says:

    October 31st, 2007 at 5:15 am

    I’m trying to apply sprites technique to a group of PNG images. The technique consists in background repositioning. However, it doesn’t work because IE6 filter was previously applied and it does not allow repositioning.

    Could you tell me any solution to this trouble? Might I be force to use GIF instead of PNG’s?

    Thank you.

  14. Sangesh Says:

    October 31st, 2007 at 7:37 am

    Hello,

    Thank you for this article. I had been on look for PNG related articles and in specific, tranparency-based PNG related articles.

    If anyone has any idea about this please let me know.

  15. tsk Says:

    October 31st, 2007 at 8:06 am

    The HTC hack works fine, however it breaks on background-position properties (when you’d like to have a hover effect with no flicker)

  16. Alex Says:

    October 31st, 2007 at 9:58 am

    In order for the PNG fix to work properly, and not have weird stretching images everywhere, all png images must have a height and a width set in the attributes of the tag. I use this all the time and it’s fantastic. Its changed the way I code sites.

  17. Israel Jernigan Says:

    October 31st, 2007 at 10:37 am

    A less complex technique is to combine the IE comment with your first idea.
    Just declare your initial images in your main stylesheet. Then, link to another stylesheet with the overriding IE alpha declarations in it.

    
    <!--[if lte IE 6]-->
    

    ie.css has something like below for each image it needs to replace.

    * html body .image{
    background-image:none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
    enabled=true,src=’images/myimage.png’,sizingMethod=scale);
    }

    I think it’s better to only change what you need to change, not change every image with a bulky include file. And this method validates perfectly since it’s being called in an IE comment.

  18. Jonathan Says:

    October 31st, 2007 at 11:07 am

    There are several problems with this as your astute readers have pointed out. I have taken to using conditional comments to add different stylesheets for IE6 to avoid using transparent PNGs in IE6 essentially downgrading the design. This works for other properties as well that don’t work in IE6. As a result, the sites will look different in IE6 versus IE7, Firefox and Safari. For example, using a solid color background instead of a transparent background in IE6 but all other browsers will display the transparent background. If you want the full experience either upgrade or switch browsers.

  19. Daniel Says:

    October 31st, 2007 at 3:18 pm

    Not sure if anyone pointed this out or not… This only works fro non-repeated images. if you have a slice of shadow or a small overlay for your background then it will not work in IE 6 even with this solution.
    So far I haven’t been able to find a solution for those of us who want to use them that way.

  20. Robbert Helling Says:

    November 1st, 2007 at 3:41 am

    I customized this snippit i for automated fixing of all background png images:

    function fixElement() {
    if ( /\.png(.*)$/.test( element.currentStyle.backgroundImage.toLowerCase() ) ) {
    imgSrc = element.currentStyle.backgroundImage;
    element.style.backgroundImage = “none”;
    element.style.backgroundColor = “transparent”;
    imgSrc = imgSrc.replace(/^url\(\”/, “”);imgSrc = imgSrc.replace(/\”\)$/, “”);
    element.style.filter = “progid:DXImageTransform.Microsoft.AlphaImageLoader(src='” +
    imgSrc + “‘,sizingMethod=’scale’)”;
    }
    }

  21. PKayne Says:

    November 2nd, 2007 at 10:12 am

    Kevin Says:

    October 30th, 2007 at 6:27 pm

    A better way to do it would be to tell the person to upgrade to IE7 or better yet, Firefox lol.
    —————————————————————————————–

    Yeah that’s real practical for us who must design websites which will be viewed by audiences often in the 1000’s (Promotional web designers, University Web designers, etc). And when many if not most of your audience are die hard loyalist either IE, can’t update to or are clueless about IE7 or Firefox, your suggestion is not option.

    At the end of the day the issue for us (namely front end designers) is the user’s needs and that includes cross browser compatability.

  22. Nick Says:

    November 2nd, 2007 at 8:12 pm

    Not only is this method unreliable due to the fact that it will randomly display the image at different sizes in IE, but it does not work for css background images – which is where transparent png’s are most useful IMO.

    And although IE7 does display png’s with transparency – it also doesn’t display png’s correctly for background images. If there are hyperlinks in the div with a png background they become unclickable.

    So basically png’s are useless in IE – you’d be better off using conditional stylesheets and feeding IE gif’s instead. It’s uglier and more time consuming but it is the only reliable method of using png’s that I’ve found.

  23. Rebeca Says:

    November 3rd, 2007 at 7:06 am

    Thank you Nick,
    So that’s the reason why clicking PNG icons did not allow me to go to the a tag destination. Does anyone know how to convert a PNG image to GIF image smoothing its borders? With normal conversions the images display with an ugly black border around them.

    Thanks from Spain

  24. Rebeca Says:

    November 3rd, 2007 at 9:41 am

    Good afternoon again,

    My new blog http://cssymas.blogspot.com has just been born. It’s in Spanish by the moment but I’m working on a Javascript technique to make it translatable into English. My first post was dedicated to the pain that a sprites technique can produce if it is not correctly planned. I would be pleased if any of you can give me an opinion about the text (still working on the design).

    Thanks

  25. Andrew Says:

    November 3rd, 2007 at 12:40 pm

    Removing the gAMA chunk from a PNG is easy as pie. If you are using Photoshop CS3 it already does not include that chunk with a “save for web” command, otherwise someone above mentioned an OSX program for it, and here is a PC program for the same purpose
    In Fireworks there is a way to get a PNG-8 file (limits the palette to 256 colors, emulating a GIF) to have single color semi transparencies, which will work in everything but IE6, but IE6 degrades to just on/off transparency, read more here
    I have my own method which I like and use all the time. It’s more work, but it works in everything and IE6 (of course not sub IE6 since those browsers don’t even support PNG Alphas). It requires the creating of divs for the purpose of displaying the PNG as a background image, and then layering another div on top of it by rendering it after in the source code, thus retaining all functionality, and this also allows IE6 to render correctly, but mind you, not using “scale”, but using “image” rendering mode for the filter, and setting the div to the width and height of the image you’re rendering.
    Also you can replace hard coded images in IE6 with the correctly loaded Alpha by setting height: 0; and then setting padding-bottom: to the height of the image you’re loading, then running the filter.
    As far as converting a PNG to a GIF smoothing the borders, just open the PNG with the Alpha in Photoshop, then save out as a GIF with a matte and transparency. I will say though typically you’re better off using a PNG8 file vs a GIF, unless the image is very very small, PNG has a better compression engine than GIF, which is really only good for tiny images and animations.
    Bottom line is PNGs are not useless, in any of their varieties. All can be used in a different situations and had to work in all modern browsers using any multitude of methods, my method works for me, everyone else probably has their own method.

  26. Rebeca Says:

    November 4th, 2007 at 11:41 am

    Thanks Andrew, I’ll try to save my PNG files in GIF with a matte and transparency as you suggested. By the moment I cannot apply the divs technique because the page has already more than 50 divs mixed up with tables to get to the icon item and my wish is to clean the structure as much as possible. It’s a very complex site designed with portlets and one of my tasks is to clean it up deeply.

    Despite this, why do the people still use IE6? That bothers me.

  27. meep Says:

    November 5th, 2007 at 11:11 am

    because ie7 won’t install on windows 2000 or windows 98. Alot of people have a choice. Our office runs on a windows 2000 platform still. The cost vs benefits of upgrading to xp were decided to be negliable.

  28. Rebeca Says:

    November 5th, 2007 at 12:34 pm

    meep,

    If you cannot upgrade to IE7, your company should use FireFox. It’s free, secure and works fine with W3C standards — Of course at least it is a personal choice. But I just cannot understand some kinds of elections when the free product works better than the other one. I am not a FF fan since I use IE7 and FF all the time. But IE6 is just a bad browser. It renders like in a nightmare, it is very insecure and its interface does not have vital tips that the others do.

  29. Karl Says:

    November 14th, 2007 at 12:43 am

    I’ve been pulling my hair out over this. I’ve used the filter option many times with PNG images to help IE6, but when it came to having a PNG as a background image, I was stuck. Now that I’ve found this, I had my site working within 2 or so minutes. Bless!!!

  30. suraj naik Says:

    November 16th, 2007 at 5:54 am

    is there any way if i include the script in header with external file & it applies tranparency to all the images that come through css…y do all this…

  31. mikull Says:

    November 26th, 2007 at 4:06 pm

    @Rebecca

    The issue isn’t about a company using a browser, but of a potential audience. I code for a University, and our analytics tell us that 80% of visitors browse with IE. 40% of those people browse with IE6. This constitutes and significant amount of hits to our PR department, whether I believe it or not.

  32. jeff wong Says:

    December 10th, 2007 at 8:43 pm

    thank you for this solution
    easy for me fix my webpage with png image
    just copy iepngfix.htc into the web folder
    then add below command with the page header

    img, div { behavior: url(iepngfix.htc) }
    .style1 {
    text-align: center;
    }

  33. chon Says:

    December 12th, 2007 at 7:09 am

    about background??

    it’s not repeat.
    Can i do?

  34. eva k Says:

    December 17th, 2007 at 8:36 am

    Hi all.
    Firstly, i have to confess that I am not a web developer, and I don’t have any special knowledge of web development, though I’m trying…
    Recently I downloaded a wordpress theme which uses png images and has a pngbehavior.htc file. My host seems to have issues with .htc files and cannot read them or treat them right.
    The reason I’m posting here is because I really want to use this template, and I wonder if there is any way to include the .htc file in the .css file, since, it can’t be called externally.
    I would be gratefull if somebody could help me with this,
    Thank you very much!

  35. Mark Cate Says:

    March 31st, 2008 at 2:04 pm

    Mac did shaft competitive browsers circa 1998 and coped a big lawsuit. If anyone finds a way to make FireFox et al NOT fade out PNG images, don’t let Apple know, ’cause sure as HELL they will try and plug your fix.

  36. Coderlabs Says:

    April 12th, 2008 at 5:45 am

    Nice article. It helps me very much. Thx

  37. ph1x Says:

    April 17th, 2008 at 6:07 am

    yes this might be a solution but I think that we have to push Microsoft to move the technology further not to let them (Microsoft) take us back in time with products like IE6 and IE7… I still have hope that microsoft will bring the browser’s css support to another level making our lives (designers and programmers) easier.
    http://www.savethedevelopers.org/

  38. Tim Kenington Says:

    April 23rd, 2008 at 6:19 pm

    Thanks for for the straightforward “how to”…

    You’ve helped solve my problem much quicker than I expected!

    Cheers
    Tim

  39. Agus Vidi Says:

    June 7th, 2008 at 8:26 am

    Thank you for Post this great Article.
    This methode is the best solution I ever tried.

    It’s work’s like a charm.
    Only God knows how happy I am now…

    Every PNG’s works.. works.. works…

    Say good bye to GIF.
    Welcome PNG…

  40. Artstudio Tatiana Says:

    June 13th, 2008 at 9:49 am

    Oh, glad to find how its work finaly

  41. Markus Koljonen Says:

    June 15th, 2008 at 10:45 am

    Thanks for this. This sort of quirkinesses always make me want to rebel and forget about designing for IE – that being the first way that comes into my mind to enforce browser evolution into some sensible direction.

  42. freelance web designer Says:

    July 3rd, 2008 at 7:19 am

    This tutorial help me a lot. Thanks

  43. Trent Tompkins Says:

    July 24th, 2008 at 12:29 am

    To the person asking about the png colors – you can get a tool from my website, TrentTompkins.com, to strip out the data that screws up the colors. It’s called TweakPNG CL – it add itself to the right click menu for PNG’s, so you can strip it out in literally one second.

  44. Don Howe Says:

    July 25th, 2008 at 10:00 am

    I am currently working on a web site now and Instead of using the in-line style tag in the div, I placed the filter script in my css and it works like a charm on IE6 but not Firefox 2.0. The png doesn’t even show up in FF. Is there some element that I am missing?
    .swoops
    {
    position:absolute;
    left:798px;
    top:24px;
    width:198px;
    height:808px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’images/swoops.png’,sizingMethod=’scale’);
    /*background-image: url(‘../images/swoops.png’);
    background-repeat:no-repeat;*/
    z-index:999;
    }

  45. AW Says:

    August 28th, 2008 at 2:19 pm

    To: Don How

    -You have commented out your background image. Your div is working in IE because IE is loading the Microsoft filter. However, Firefox ignores the filter completely. With your background commented out it’s ignored, and FF has no background.

    -Also note; If you uncomment your background, you will have 1 background appear in Firefox. Depending on your div and image size, you may see 2 backgrounds appear in IE, from the background and the filter. You should include something like:
    !background-image: none;
    to stop IE from loading the background-image.

  46. Safwan Ahmedmia | Online Portfolio Says:

    September 30th, 2008 at 12:07 pm

    Thanks for the post. I had this same problem on my online portfolio.

    Not sure if anyone else uses this, but another valid way to get around this issue is to define 2 styles in the stylesheet and specify with the !important flag to choose the one that works best for the browser using it.

    E.g.

    background-image:url(‘../images/bg.png’) !important;
    background-image:url(‘../images/bg.gif’);

    Hope it helps.

    Saf

    http://www.ahmedmia.com
    http://www.safwanonline.co.uk

  47. roger Says:

    October 1st, 2008 at 2:20 am

    I am clealy seeing some issues with this technique. The png image displayed in this page has different look in IE6 and FF. In IE6 I can clearly see a greyish background, FF looks good. So does this technique creates this issue?

  48. Doron Says:

    February 17th, 2009 at 8:59 pm

    There is a great page which clears up the entire issue of IE6 not allowing hyperlinks to function on top of a transparent PNG:
    http://www.satzansatz.de/cssd/tmp/alphatransparency.html

    For me, it was a simple as adding the following to my anchor tag in the CSS:

    a {position:relative;}

    This tip was a total lifesaver!

Leave Your Comment

JavaScript ELSEWHERE

Links of Interest

Internet Trails

Publications

Popular Blog Posts


Featured Publication

Designing Web & Mobile Graphics

by Christopher Schmitt

New Riders, 2013