#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. Tim
    Permalink to comment#

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

  2. Snogle
    Permalink to comment#

    I love you..!

  3. 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. Jon
    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. Sumeet Chawla
    Permalink to comment#

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

  6. Tav
    Permalink to comment#

    Thank you Chris! Greetings from Craiova, Romania!

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

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.