Create Transparent PNGs in IE6 Using AlphaImageLoader & No Hacks

October 31, 2007 | Tags for this entry: , , , ,

As promised, this article describes how to use transparent PNGs in your CSS design in a very clean way. This method simply uses the default cascade and inheritance instead of the CSS hack for transparency described in my previous article on the subject.

As in our previous example of old-school CSS for transparency, we start with our basic background image that includes alpha transparency.

Mater With Alpha Transparency

#truck {
	width: 470px;
	height: 294px;
	background: url(images/mater.png) no-repeat left top;

}

And, as expected, it shows up with a crummy blue haze in IE 6. (Which we won’t show here…)

Last time, we isolated which version we wanted to deliver to Internet Explorer by using the parent > child selectors of CSS and a hack that only IE would recognize.

The Clean Solution
This go-round, we will take it up a notch. Start by defining an IE-only stylesheet. Personally, I always have one of these (and another for IE7) at the start of a project. It’s good practice because there will always be little hiccups in IE that you can address easily by serving it a separate CSS file.

So, create a CSS document called stylesIE6.css or something to that effect.

Now, let’s link to that stylesheet using IE’s conditional comments. So, in the head of your document AFTER your existing stylesheet, enter

<link rel="stylesheet" href="styles.css" type="text/css" />

<!--[if lte IE 6]>
<link href="stylesIE6.css" rel="stylesheet" type="text/css"></link>
 < ![endif]-->

*Please note: WordPress is adding a space before the exclamation point and ‘endif’. There should be no space there in your code.

This code reads: ‘If less than or equal to IE6, then use this stylesheet’. Remember, that all previously defined styles our primary stylesheet will apply to our document. (You can view all of the possible conditional statements at MSDN). In this stylesheet, we simply want to define the things that we want to change. My IE stylesheets usually contain only a few lines of code.

Next, in your stylesIE6.css stylesheet add the transparent graphic on our #truck element using Microsoft’s AlphaImageLoader filter that we used before.

#truck {
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='images/mater.png', sizingMethod='scale');
}

At this point, there are two things that you should notice:
One – We did not have to specify our width and height in the IE-only stylesheet because the #truck element will inherit those settings from the main style sheet.
Two – The #truck element will also inherit the original PNG graphic from our original style sheet. Now, we see two trucks, one of which we don’t want.

Solve this by adding the background property to your IE stylesheet to override the display of the original graphic. Our IE stylesheet wins in specificity because we placed it BELOW our original stylesheet in the source code.

#truck {
	background: transparent;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='images/mater.png', sizingMethod='scale');
}

Now, we should have the same transparent png graphic in IE as we do in all other browsers without relying on hacks. Using this method to isolate browser-specific CSS gives you the most control and keeps you from having to make changes in the future if a browser update renders your hack useless.

Notes:

Find out more about the attributes of AlphaImageLoader at MSDN
Find out more about IE Conditional Comments at MSDN

Related Posts

Comments

25 Comments

  1. Zak writes:
    November 18th, 2007 at 1:27 pm

    Just stumbled across…

    And yes this technique is so much cleaner. However as far as the sizing method is considered I’d like to mention “image” as well as “scale”.

    Scale stretches or shrinks the image to fill the borders of the object.

    and image is the default sizing method. It enlarges or reduces the border of the object to fit the dimensions of the image.

  2. Jo writes:
    January 2nd, 2008 at 2:53 pm

    Wow – this seems like a really clean solution to a dirty problem, will try it on my next site. Thanks

  3. Ian writes:
    January 3rd, 2008 at 1:31 pm

    Great to see this – love the cleanliness of it. Thanks a ton 🙂

  4. Navdeep writes:
    January 10th, 2008 at 10:53 am

    pretty neat code…

  5. Rick writes:
    February 7th, 2008 at 11:13 pm

    Does this work with 24-bit png’s or just 8-bit?

    Rick

  6. .abelafonte writes:
    February 7th, 2008 at 11:25 pm

    @Rick,

    This method refers to 24-bit PNGs. 8-bit PNGs behave more like GIFs in that they need a background color to provide smooth transitions in alpha areas.

    Only PNG 24 can support full alpha and actually interact with any element that appears behind it.

  7. Rick writes:
    February 8th, 2008 at 6:55 am

    Thanks for the info and the tutorial! This sure beats the method I’ve been using!

  8. jordan writes:
    February 15th, 2008 at 10:48 am

    Awesome, but I can’t get it to work with multiple instances of the filter call in one CSS doc… any ideas?

  9. scott writes:
    March 26th, 2008 at 2:23 pm

    This is great, really helped out. The only problem I’m running into is when I use it with an Anchor control

    example a.SomeButton.active

    It works great for :link,:visited and :hover but doesn’t work for the :active

    If you have any idea that would be great

  10. Liam writes:
    May 16th, 2008 at 5:56 pm

    Just want to say great stuff. Just wanted to add something in case people are using this technique and getting stuck.

    The “src=’images/mater.png'” part is from the root of your website. So if you are like me, and develop websites in a subfolder until clients ok them to go live, you must specify full address like “src=’http://www.abc.co.uk/Sites/images/mater.png'”

    Hope that is clear to understand. Keep up the good work!

  11. cd writes:
    January 5th, 2009 at 7:36 pm

    Bullocks. How is this method NOT a hack? And how is it any cleaner? If any browser in the future, suddenly starts getting affected by a “hack” it is probably a POS and I won’t care what it sees. On the other hand, you’ll be managing IE specific style sheets for the rest of your life. As browsers become obsolete, the hacks stop having any effect, you’ll just change from using ie6 and ie5.css files to using ie8 and ie9.css files. Good luck with that.

  12. .abelafonte writes:
    January 5th, 2009 at 7:40 pm

    Your comment lets me know that you’re not a seasoned CSS developer.

    If you’ve been around for a while, you would know what we mean by the word “hack” in reference to CSS.

    Do some reading, my friend.

  13. Matt writes:
    January 30th, 2009 at 2:44 pm

    Great article, and this aint a hack, there’s not a * or zoom or w/ in sight!

  14. Bryan writes:
    May 5th, 2009 at 1:48 pm

    I couldn’t seem to get it to work what so ever..don’t know what I’m doing wrong. I followed the instructions properly

  15. Rohan Chandane writes:
    August 18th, 2009 at 3:31 am

    How can I specify things like – top left no-repeat with alphaImageLoader?

  16. .abelafonte writes:
    August 18th, 2009 at 9:30 am

    The alphaImageLoader doesn’t take any CSS properties. You cannot specify position, etc.

  17. Max writes:
    September 24th, 2009 at 2:56 pm

    nice solution. However I had a problem implementing it. It work as inline style or embedded style, but does not work if I put it in external style sheet.
    Any help or advise are welcome.
    I did check all paths

  18. .abelafonte writes:
    September 24th, 2009 at 3:21 pm

    You must ensure that your link to IE stylesheets is AFTER your default stylesheet.

    Also, you will have better success by referencing images absolutely, not relatively.

    For example: use url(/images/truck.png) rather than url(../../images/truck.png)

    or wherever your images live.

  19. núria writes:
    February 15th, 2010 at 5:32 am

    thank you so much!!!

  20. evanmcd writes:
    March 19th, 2010 at 10:06 pm

    Bummer. Didn’t work for me. Loved the idea of the solution, but nothing I did could get it to take.

    #navMain a:hover, #navMain a.CMSListMenuLinkHighlighted
    {
    background:transparent;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src=’/Assets/images/navMainOverArrow.png’, sizingMethod=’scale’);
    }

    Thanks anyway… on to the next method.

  21. Cflex writes:
    June 11th, 2010 at 2:40 pm

    For me this is a great step in the right direction. My problem is that we were using PNG 24 images for linking purposes in some cases; clicking on the PNG 24 would take you somewhere else.

    With your solution, embedding the PNG 24 into the background means there’s nothing to click on to link to another page. I can see the graphic, but can’t click it.

    And I can’t use the png itself or I’ll wind up with 2 images.

    So I created a 1x1px transparent gif, that I can use in place of the png as the href linked element.

    The .gif has been stretched out so it effectively covers the dimensions of the PNG that is embedded in the background with CSS. And you can click the .gif, which you never see, and it feels like your clicking on the PNG, and the effect is the same: you’re taken to the linked page.

    However in IE6, wherever the .png 24 graphic exists, the .gif is not clickable. Only in the Alpha areas can I click and get the linked page.

    Any ideas on how I can get this to do what I want?

  22. Tomaz Vovk writes:
    June 28th, 2010 at 5:15 am

    @Cflex:
    Instead of adding a transparent gif, you could simply create a link with this css:

    .myimage a {
    display:block;
    text-indent:-99999px;

    width:128px;
    height:128px;

    position:relative;
    z-index:10;
    }

    128px are width and height of your image (div or whatever you use). Position:relative fixes the problem where you couln’t click on the “image”.

    So in the end you have

    My link

    Hope this helps

  23. Tomaz Vovk writes:
    June 29th, 2010 at 1:01 am

    I wanted to show the final markup in my previous post but it didn’t display as I wanted, so I’ll write it again using square brackets instead of greater & later signs. The final markup should be:
    [div class=”myimage][a href=”mylink”]My link[/a][/div]

  24. Joanne writes:
    August 10th, 2010 at 5:35 am

    Fantastic, this fixed my bug, thanks so much!

  25. dustin writes:
    February 18th, 2011 at 4:56 pm

    Excellent! By far the easiest png fix I’ve ever implemented, and no need to load extra JS. Nice work.