IE PNG Fix with Background Support

Posted on Apr 27, 2006

I have commented on this topic many times before, and it always seems like there is a new IE PNG fix out, but IE PNG Alpha Fix v1.0 RC4 is exciting for two reasons:

  1. It automatically supports png background transparencies. My current solution is Sleight and while it benefits from a lack of lag time, it does not support background transparencies.
  2. It requires 1 line of CSS to implement. Yes, you heard that right.

Here is example code taken from the source of their demo page:

<style type="text/css"> <P>
/* USAGE: All you have to do is include this one line in your CSS file, with the tag names to which you want the script applied: */ <P>
img, div { behavior: url(iepngfix.htc) } <P>
/* Alternatively, you can specify that this will apply to all tags like so: * { behavior: url(iepngfix.htc) } */ <P>
</style>

Once you strip out the comments you will notice we are down to a single line of CSS that is IE specific. That's it. This did appear to have a slight lag time (unlike sleight), but definitely nothing prohibitive. Definitely something I will be testing out. Thanks to the Wired Monkey Bites blog (who also mention a solution for PNG image maps as well)

Comments

Mike Rankin If this isn't fixed with IE7, I'm probably not going to bother to upgrade.

Posted By Mike Rankin / Posted on 04/27/2006 at 10:44 AM


Brian Rinaldi My understanding is that it will be...though I have not tested the IE7 beta.

Posted By Brian Rinaldi / Posted on 04/27/2006 at 12:12 PM


Peter Boughton Unfortunately it doesn't appear to support repeatable backgrounds. :(

Posted By Peter Boughton / Posted on 05/04/2006 at 8:38 AM


Dave I believe this has similar limitations to other solutions:
* Can't help IE versions prior to 5.5
* Users can't right-click-save processed PNG images, they'll save the blank GIF file if they try that. In some cases this might be a feature, not a bug...
* It's most reliable on elements with non-'auto' dimensions set. So, give images and other elements width/height values; '100%', '10em' and '200px' and so on are all OK.
* Background PNG images can't be tiled. This is a limitation of the IE filter.
* Similarly, padding and borders don't indent the PNG image. An easy fix for this is wrapping your PNG images in container DIVs or similar.
* There may be about a short time as soon as the image loads when images are not transparent, before the IE filter kicks in.

Posted By Dave / Posted on 03/10/2007 at 7:11 AM


asdf "background-position" doesn't work either with this one. I tried positioning a small background image to the bottom right corner and it stayed at the top left one.

Posted By asdf / Posted on 12/20/2007 at 9:46 AM


Chris It does not work for me (IE 6) ....

Posted By Chris / Posted on 03/15/2008 at 3:54 PM


Ross I found a similar solution somewhere else, which works great. Regarding the comment above about the short flicker, I notice that if you include the CSS directly on a page that you dont get it, if it's in an external css file then you'll get the flicker.

Thought it might help!

Posted By Ross / Posted on 07/31/2008 at 5:16 AM


imran please why this script is not supporting repeatable backgrounds. please give me any tip to overcome this problem
please help me!!!

Posted By imran / Posted on 03/09/2009 at 5:32 AM


Om I am using to this script but its not working properly. like that if you will use to this Syntax in css "background:url(image/new.png) repeat-x top left" then I sure it will not worked.

Posted By Om / Posted on 12/03/2009 at 11:45 PM


austin on my htc tilt i set one pic as my background and i get it off the internet and it shows as many as it can on the background help please?

Posted By austin / Posted on 03/20/2010 at 1:09 PM


web designer kanpur its not working ie6

Posted By web designer kanpur / Posted on 05/01/2010 at 5:10 AM


Sang Nguyen Its not working IE6

Posted By Sang Nguyen / Posted on 11/21/2011 at 12:15 AM


Write your comment



(it will not be displayed)







About

My name is Brian Rinaldi and I am the Web Community Manager for Flash Platform at Adobe. I am a regular blogger, speaker and author. I also founded RIA Unleashed conference in Boston. The views expressed on this site are my own & not those of my employer.