Transparent background PNG’s in IE: The only guide you need

I know this question has been around for a very long time but I am still seeing bookmarks and stories pop up around the web for ways of handling transparent PNG's in Internet Explorer (IE) 6 and below. After working with them for a long time now, I thought that I would post the best way that I have found to achieve transparent background images. This method is nothing new. It may be used in conjunction with a new way but the CSS has been around for a very long time. I wanted to focus on the background image. I see a lot more ways of dealing with an actual image in the page and not so much the background image.

I hope this will serve as a reference for people to get all of the the info they need in one place and not have to visit two or three sites. Without further adieu let us begin.

I want to start off by saying that I think retrofitting for older browsers (yes IE 6 and below are too old) is a bad idea. We should be moving forward with our development in CSS3 etc... while making sure the older browser are still readable. They do not necessarily need to look the same. Now, with that said, I work as a web developer and know that this idea is rarely accepted by designers and clients alike. I just wanted to get my feelings out there because that is the whole point of this blog. On to the method already.

Wait for it...

The CSS

* html #id {background-image: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/image_name.png',sizingMethod='scale');}

yep! That's all it is. No fancy javascript, no special image name with transparency behind it, nothing. Throw that in your IE style sheet or right below your 'good browser' statement in your screen style sheet and you will be good to go. Remember: the path is relative to the page you are on, not the CSS file. So absolute path to the image is probably the best way to go.

Notes

As always there are some things to be aware of when using the filter method. If you make sure to follow this rule, you will save yourself a lot of headache. On the element your are using the filter. DO NOT set a position. On any element inside of the element with the filter, DO set position to relative.

(eg.) If your transparency is on your wrap div, do not set a position. Set position relative on your content div and all items within content will be OK.

Now your links and text will be clickable and selectable.

<div id="wrap">
<div id="content">
<h1>Site Title</h1>
<h2>Tagline</h2>
<p>Some <a>long-winded</a> content with a link</p>
</div><!--end #content-->
</div><!--end #wrap-->
#wrap {background: url(../images/image_name.png);}
* html #wrap {background-image: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/image_name.png',sizingMethod='scale');}
#content {postion: relative;}

As with all other posts you have read about the filter method. The background image will stretch to fit the element, so there is no background-position usage etc...

If you are unable to use a separate (slightly modified) design to handle your transparency needs for IE then the above method will save you a lot of pain when dealing with them.

Below is the code for a snippet to add the above CSS to your style sheet easily with Textmate or e text editor

create a new snippet
add:

background-image: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/${1:image_name}.png',sizingMethod='scale');$0

to the big block
Activation: tab trigger > iepng
Scope Selector: source.css

Further Reading

8 thoughts on “Transparent background PNG’s in IE: The only guide you need”

  1. I am still learning, so can you clarify this for me? Will it work if I create a class in the and then reference it for each image in the ?

    img.name {
    background-image: none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
    }

  2. Annie,
    Yes, you can create a class and use it for each image.

    But it looks like from your example that you want use a transparent image that is not a background image. In this case, when you place the filter over your img.name the unfiltered image in the img tag will still show through. I would recommend using conditional comments and put a spacer.gif as the src for the image in IE6 and below, or use on the many javascript options that are available.

  3. I tried one of the javascript options and while it eliminated the background transparency issues, it also got rid of my relative positioning and rollover images! Are there any other options? Now I’m thinking that I have to include the background on each of the images, which is a pain. If you want to see what I’m talking about my website is http://pocketdots.com

    Thanks for your help,
    Annie

  4. You are correct, the work around for this is kind of a pain. Then again, getting most issues worked out in IE 6 usually are. I guess I would first ask you if IE 6 really needs to be supported on this site. IE7 and up has full support of png transparencies. But since you are asking about it, I am guessing you need to support it. In any case, here goes:

    Looking at your code, I can see you have a basic menu and you want png rollovers for them. Here is a demo I made for what you need to do. http://bathew.com/playground/pocketdots.html

    – I like to use unordered list for menus. ul#navigation
    – A conditional comment for IE 6 and below has been added to add an extra div for the transparency
    – That is all the html you will need. The rest is css and javascript
    – The first part of the css is for basic styling of list to look like your old menu.
    – I am using the hover attirbute on the li. This is the reason we need the javascript. Since IE 6 does not allow hover on anything except an A tag, the javascript basically creates a class of iehover on hover and removed it on mouse out.
    – Because of the transparency and the positioning and the link we will need to use that extra div in IE. Basically you remove the background from the li and place it on the div for IE. Now you can still position the li anyway you want and the modern browsers don’t have to deal with the extra code.

    If I did a horrible job of explaining that, please let know. I can give more specific clarification if you need it.

  5. Wow, thank you so much for diving into this for me… so with these two sections of navigation tags, do I need to make the images gifs still? pngs are so much smoother and look better! I’m starting to think that if someone hasn’t updated their software in 5 years maybe they don’t care about website too much!! This is so much effort and I’m thinking that it’s not worth it.

    Do you think you can help me with one more thing? The image gallery that I have that switches between 2 pictures, but one picture displays longer than the other… is there a way to make both pictures appear for the same amount of time?

  6. You welcome. Glad to offer the help. With the new code you should now be able to use the pngs. I just referenced the images you already had, but the pngs will now work. As for supporting IE6, this site offers some reasons why you should cut support for it. http://iedeathmarch.org/

    One other option for an easier IE6 fix would be to use pngs on all sites that support them, and use the * html hack for IE6 to use the gifs. Only IE6 users will see the jagged edged gifs. This way you could put the images on the a tag instead of the li tag. The hover would then go on the a tag as well and you would not need the javascript to make the iehover event for the li.

    It looks like you need to change the (c%5==0) and (c%5==1)
    to (c%2==0) and (c%2==1). Since there are only two images, this should switch them the same amount of times.

    Since you said you new to development I would like to encourage you try out a javascript library. They make coding things like this super easy. I like http://jquery.com. There is also a jquery plugin you can use to fade between images. http://jquery.malsup.com/cycle. Using these, there is minimal coding from your side. If you would like, I could help show you how to use this on your site. Just let me know and good luck.

  7. Great! Thanks for all the resources. And I like your idea of using pngs on the site and only gifs for IE6 users! If I have any more questions I’ll let you know. You are a lifesaver! I feel like I get stuck on one little thing and it eats away all my time.

    Annie

  8. Oh my gosh, thank you so much for telling me how to fix the timing problem! And I love that jquery site! It has great examples and explanations. Very cool.

Comments are closed.