I've found the holy grail...

IE6 PNG Transparency Fix for Repeating Background Images

****Update: its not actually repeating, its scaling the image which give the appearance of repeating vertically.

This hack is for making transparent pngs, actually transparent in IE6 when used as a repeating background. I'm sure most people have a hack they use for transparent png images in the html for IE6. This isn't another fix for that, again, this is for background images that repeat.

First, put a conditional statement in your head to display this hack when IE6 is used. Inside of this conditional statement you will insert the hack.

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/transparent_bg.png', sizingMethod='scale');

Now, I haven't experimented much with this, with certain images, in certain situations this can give the appearance of a repeating background.

In your normal css sheet it's business as normal, just place the background in the css and have a nice day. Below is an example of the conditional statement and the css hack.

Here are some screen captures, notice the "rocks" in the background behind the black background.

Firefox Capture
IE6 Capture

<!--[if IE 6]>
<style>
#IE_blows {
height: 100%;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/transparent_bg.png', sizingMethod='scale');}
</style>
<![endif]-->

/* put in normal css sheet */
#IE_blows {
  background: url(/images/transparent_bg.png) repeat-y;
}
/* put in normal css sheet */

****Update: its not actually repeating, its scaling the image which give the appearance of repeating vertically.

1 Comment

Angelo said on March 06, 2008

Very interesting. Another cool ‘hack’ here:
http://24ways.org/2007/supersleight-transparent-png-in-ie6