Grow your CSS skills. Land your dream job.

The Different Techniques for Applying the PNG Hack

Published by Chris Coyier

Alpha-transparent PNG's, ("PNG-24" for those of you saving out of Photoshop) are an amazing thing for web designers. We can make a button with a drop shadow on it and it will multiply that shadow onto whatever happens to be underneath it, even if that background changes. This may seem like a trivial thing, but it's really not. The possibilities that alpha transparency opens up for you as a designer are many. The problem, as you are likely well aware, is that Internet Explorer (IE < v7) do not support alpha transparent PNG's. The more you think about it, the sadder it gets. Luckily, there are a few methods that have arisen over the years to help us whip these older versions of IE into shape. Here is a roundup of some of those techniques.

NOTE: All of these techniques ultimately end up using the Microsoft AlphaImageLoader filter to force the transparency. The techniques just vary in HOW and WHEN that filter is applied.

 

Using the AlphaImageLoader behavior for specific CSS classes

alphaimageloader.png
Internet Explorer supports a "custom extension" to CSS in the form of a "behaviors" attribute. None of the other major browsers support this, allowing you to take advantage of browser-specificity to force this PNG hack onto only browsers that need it. This technique uses a big nasty chunk of non-validating CSS which essentially uses the AlphaImageLoader filter to force the transparency.

Remember that there are two places you could need potentially need to apply transparency: to inline graphics (<img>), and CSS background-images. With this technique, you could apply the behavior to a specific CSS class (like ".png") and then selectively apply that class where needed OR you could apply the behavior globally to all img elements.

Also note that while this will work on CSS background images, it will not work if that image is repeated or positionedin any way.

MORE ON THIS TECHNIQUE:
Komodo Media: Replacing images with background-images
SNIPPLR: Using filter for IE and an attribute selector for Mozilla

 

Behavior and Referencing an HTC file

htc-method.png
The best part about this technique is that it's a one-liner in your CSS file that references this ".htc" file, and you are done. The behavior magically applies the the necessary Microsoft proprietary crap to the needed page elements and you got yourself alpha transparent PNG's in IE.

MORE ON THIS TECHNIQUE:
Twin Helix: IE PNG Fix

 

Using Javascript

js-ail.png
Since Javascript has that magically ability to monitor and peruse all the elements on your page, it can be ideal to use for looking for any applying classes on your site. There are a couple of really compelling reasons to go this route. One, you can conditionally apply the Javascript to only load for the versions of IE that need it. Two, it's just as "set it and forget it" as the HTC method. Three, there is nothing invalid about this so you don't need to be concerned about your code or CSS not passing validation. Four, Javascript has the ability to see "new" content added to a page (think AJAX) and act accordingly. The previous techniques will only work on the initial load of the page.

MORE ON THIS TECHNIQUE:
24 Ways: Superslight
PNGHack on Google Code

Comments

  1. This is a great resource, Chris. I’ve been meaning to do some research lately into IE PNG hacks, but I just haven’t had the time. Now I don’t need to. :) Thanks!

  2. You can also sort of combine the JavaScript method with using a single line in your CSS file. I commonly use this: #some-element { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/path/to/image/some-graphic.png', sizingMethod='crop'); }

    As you pointed out, the pitfalls are that you cannot position the graphic nor can you have it repeat but, with some creative usage of the graphic(s) you can usually accomplish what you need.

    I should also point out that you can kind cheat the repeating by creating an image that can stretch either vertically or horizontally and using sizingMethod=’scale’ (this will cause the image to stretch) versus sizingMethod=’crop’ which will, you guessed it, crop the image.

    You can include this rule in a conditionally commented style sheet or by using the * html filter.

  3. Excellent recap of some of the more useful approaches addressing this most aggravating issue. Despite the range of possibilities presented by transparent PNG in IE 6 and earlier, we still tend to shy away from using this technique for background images – results still seem to be inconsistent at best.

    One common common issue to keep an eye out for is disabled anchor tags – especially if a design necessitates the use of a transparent PNG (with JavaScript filter applied) for a large background image that’s applied to the body or a container div. In some instances this combination will disable all of the links on the page in question. This situation most commonly occurs when the sizingMethod is set to ‘scale’, as mentioned by chipgrafx above.

    We’ve tried a number of approaches for fixing this issue, most involving the application of additional CSS properties to the affected anchor tags. Applying positioning and a z-index seem to be the most common, unfortunately this adds another step of (unnecessary) complexity to solve the IE bgsleight approach; unfortunately none of these tactics seem to provide a consistently reliable solution.

  4. @Boxcar Studio: Thanks for mentioning that. That is especially scary, knowing that even if you successfully get transparency working, you may be smitten in an even more devious way by your links getting broken or other page elements being un-focus-able.

  5. Permalink to comment#

    Hey there chris, great site and resource here,
    I have had major trouble with png-transparency issues with my latest theme, rainbow feather, for wordpress. it kind of all broke in Internet Explorer 6 and it took weeks for me to fix it.
    I use semi-transparent pngs on a gradual background- if you care to take a look, it is at http://www.h4x3d.com/themes/feather/

  6. @jez: Very cool theme! The menu area looks a lot different in IE than it does in FF, I almost like it better in IE, but they both work. Cool how you can do that with conditional stylesheets.

  7. I was just about to start mucking around the internet for the details of the ‘PNG-Hack’. I might still just serve ie6 boring gifs, but this is a great starting point.

  8. Oscar
    Permalink to comment#

    Hi Chris!!!

    As always reading your blog has helped me a lot as a beginner designer, I’ve alway have great trouble when it comes to PNG transparency so I always tend to use GIF’s instead.

    And I always seem to have trouble applying this hacks, I think im not getting everythin correct.

    So, it would be awesome if you could make a screencast explaining some of this techniques, or the one that you consider the best. As for normal images and backgrounds too.

    THANKS A LOT FOR EVERYTHING!!!

  9. Permalink to comment#

    Is this topic still open for questions?

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".