Chat with Us
Allan & Steve are the chubby founders of LessEverything. This is their blog, hear them rant, praise, give advice and talk about Just Stuff, Less Accounting, Lovd by Less, More Honey, Events, Less Memories, Code, Business, Design, Marketing
Subscribe via RSS

I've found the holy grail...

written by Allan Branch on March 6th, 2008

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 Response to “I've found the holy grail...”

  1. Angelo March 6th, 2008

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

Sorry, comments are closed for this article.

·