IE6 PNG Transparency CSS background-repeat Fix
Couple of people around the forums and here commented that none of the current Internet Explorer 6 PNG scripts provide fix for the issue of using png image as CSS repeated background (background-repeat: repeat/repeat-x/repeat-y).
Therefor with no generic solution at this time I thought of three possible workarounds:
- Use sizingMethod=’scale’
- Use flash for rendering the png
- Make as much as needed areas and repeat with Javascript
Here I will explain the first one since it was the easiest to try.
The idea is very simple just use filter: progid: DXImageTransform.Microsoft.AlphaImageLoader(enabled=’true’, sizingMethod=’scale’, src=’the-image-you-want-to-repeat.png’ ) and make sure you properly apply the other CSS rules. This technique uses scaling instead of repeating but for shadows and other cool effects it is sufficient.
End result and demo following:
For more info see the demo under Internet Explorer 6
Tags: AlphaImageLoader, background-repeat, bug, css, ie6, png, transparency
March 3rd, 2008 at 4:01 pm
The title is misleading “background-repeat fix”. You should change the title, since i don’t see any solution for background-repeat IMO.
April 28th, 2008 at 10:03 am
[...] http://blog.creonfx.com/internet-explorer/ie6-png-transparency-css-background-repeat-fix [...]
June 17th, 2008 at 9:16 am
css background examples , Properties , Attribute - - css-lessons.ucoz.com/background-css-examples.htm
June 17th, 2008 at 12:42 pm
@e devlet what are you trying to say ?
July 16th, 2008 at 11:36 am
Thank for this! I’ve been looking for something like this for a while.
@eligio, what do you mean misleading?! It does exactly that, enables you to repeat png’s as background in IE6. Worked just fine with me.
If you want to use PNG non repeat:
width:10px;
height:10px;
_width: 10px;
_height: 10px;
background: url(whatever.png) top left no-repeat transparent;
_background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’whatever.png’,sizingMethod=’scale’);
if you want to use PNG with repeat:
display: block;
width: 10px;
background: url(whatever-repeat.png) top left repeat-y transparent;
_background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=’true’, sizingMethod=’scale’, src=’whatever-repeat.png’);
One repeats the PNG the other doesn’t and both work in IE6.
August 3rd, 2008 at 3:33 pm
Thanks Peter I am searching for the repeating and positining PNG-24 Transparent Image. Do you have any idea about repeating the transparent image that should be support with IE and Firefox.
August 13th, 2008 at 6:54 pm
Thanks for this code (the “scale” method), it works great. I just wanted to make a note that this code only seems to work if it is placed in the HEAD of the HTML document. We originally tried using it in our external style sheet, but couldn’t get it to work, and we were scratching our heads trying to figure it out, then we decided to make our code as close to your as possible, and it worked. Thanks again.
August 14th, 2008 at 12:47 pm
@Louis Lazaris
It doesn’t matter where it is placed.
Please supply some example where it was not ok
Cheers
September 3rd, 2008 at 7:28 pm
A great fix that worked for me in IE 6 which includes having PNG transparency in a background CSS image can be found at: http://www.twinhelix.com/css/iepngfix/
Cheers
Tom
September 13th, 2008 at 12:17 am
All you have to do to make the code above work is to replace the ’ with ‘ then your code will work. put examples below:
If you want to use PNG non repeat:
width:10px;
height:10px;
_width: 10px;
_height: 10px;
background: url(whatever.png) top left no-repeat transparent;
_background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’whatever.png’,sizingMethod=’scale’);
if you want to use PNG with repeat:
display: block;
width: 10px;
background: url(whatever-repeat.png) top left repeat-y transparent;
_background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=’true’, sizingMethod=’scale’, src=’whatever-repeat.png’);
September 13th, 2008 at 7:26 pm
[...] Comment on IE6 PNG Transparency CSS background-repeat Fix by Ash [...]