#32: Using the Unit PNG Fix

Designing using alpha-transparent PNGs makes life so much easier and cooler designs possible. As we are all painfully aware, IE 6 and under do not support them. They display... but any areas of alpha transparency get turned into nasty blue-gray and are anything but transparent. There is a way to force IE to respect the alpha transparency though, commonly referred to as the PNG hack. There are various methods, all boiling down to the use of a proprietary Microsoft CSS "filter". A newcomer on the scene is the "Unit PNG Fix" which is ridiculously easy to use. Simply link up a very tiny JavaScript file in your header and you are done!

Links from video:


  1. User Avatar
    Permalink to comment#

    There are some drawbacks however.
    You can’t use background-position and background-repeat.

  2. User Avatar
    Permalink to comment#

    I love you..!

  3. User Avatar
    Darren Huckey
    Permalink to comment#

    Chris – evidently, Unit Interactive moved the link to the Unit PNG Fix. The link you have listed is dead. Here is the correct link:


  4. User Avatar
    Permalink to comment#

    Very cool. Thanks Chris!

    The Unit Interactive site says that ” the CSS sprite technique will not work for pngs in IE6, when using the Unit PNG Fix.”

    What would be the best way to use transparent PNGs for a CSS sprite menu?

    Thanks again!

  5. User Avatar
    Sumeet Chawla
    Permalink to comment#

    lol that comment “Whats wrong with your website” was too funny !! :P

  6. User Avatar
    Permalink to comment#

    Thank you Chris! Greetings from Craiova, Romania!

  7. User Avatar
    Permalink to comment#

    Thanks for the great tutorial. I struggled for a couple of hours trying to make this work using VisualStudio 2013 on an ASP.net 4.5 using MVC 5. No luck. The best I could do was get the PNG to disappear. Maybe I’m not calling the right paths in the JS file or something but I tried a lot of different things. Either it must be done much more complexly using bundles and conditionals or I’m just an idiot. I’ve foregone this idea and IE6 users are just out of luck but I’m holding out hope that someone will comment that knows how to make this work in a VS2013 ASP.net MVC project (using C#). I’m still a beginner at the MS way of doing things. I made it work in 5 mins with just raw code (static HTML) but wasted 2 hours in VS. TIA for any advice!

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