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.
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’);
December 5th, 2008 at 12:13 pm
Just make big images which cover the whole area… FIXED…
January 2nd, 2009 at 7:36 pm
The first solution worked fine for me, created a rollover DHTML popup box wich had a subtle shadow beneath. Thanks.
January 2nd, 2009 at 7:39 pm
To james,
Your solution wont work in cases, such as mine where the box in question uses a dynamic ‘height:auto’, unless you set the background image to stretch, which is horrible.
January 6th, 2009 at 12:28 am
is it working???? i m not sure…. can u help me plz…. i m using this code…
if you want to use PNG with repeat:
.repeate{
display: block;
background: url(../images/a.png) top left repeat transparent;
_background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=’true’, sizingMethod=’scale’, src=’../images/a.png’);
}
help me plzzzz….
thnx…
January 6th, 2009 at 12:51 am
The src for the alphaloader is different it should be relative to the webpage loaded not the css. Try with absolute probably /images/a.png or something.
Cheers
February 20th, 2009 at 3:08 pm
Hi,
I dont get this to work. I even tried Luis Lazarus´ method but does work. It simply removes the png in IE. Im trying to have a background image for a div that has a drop shadow.
I tried this code in my style sheet and in my head tag.
#DIV {
background: url(images/MY.png) top left no-repeat transparent;
_background-image: none;
height: 230px;
width: 210px;
float: left;
padding-right: 10px;
display: inline;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’images/MY.png’,sizingMethod=’scale’);
}
please help.
February 21st, 2009 at 3:08 am
probably your path is wrong try absolute for the test. Also always use lowercase for names
February 22nd, 2009 at 7:54 pm
thanks for sharing this code. i’d been having trouble with repeating PNG images bg on ie6. this really helps a lot.
however, when i use this code on my site, links within those div are not working. i’ve been googling to find answers but apparently i still can’t find any solution. is there anyway to fix that? thanks a lot!!
my page that having trouble with: http://www.dreamerscorp.com
February 23rd, 2009 at 3:06 pm
it seems ok for the big divs. If you have problems with the links, be sure to put position:relative
February 28th, 2009 at 5:49 pm
thanks for the help!!! it works!!!
March 8th, 2009 at 2:16 am
Very nice fix, it worked perfectly for me, and such a simple light fix (no JS in sight).
I then had the same issue as Ben, and still coudn’t click on my links… once I had taken off ‘position: relative’ on the div which contained the links everything fell into place.
March 9th, 2009 at 9:52 am
my man
i think i need some help here again!!
i dont know why somehow its just not working in wordpress
its all good on my page bu not in “blog” which is build by using wordpress
do u have similar experience at all??
my page
http://www.dreamerscorp.com/blog/
thanks a lot
ben
March 9th, 2009 at 2:46 pm
@ben – Send me link on my mail and I will try helping
April 22nd, 2009 at 12:31 pm
Nice. Thank you for the solution.
It makes me frustrating.
Now I am relaxed
Thanx
May 21st, 2009 at 11:31 pm
i need help getting background on my internet
May 22nd, 2009 at 12:41 am
@randi – Where is your internet?
May 25th, 2009 at 12:56 pm
Nice solution. Now i have one another problem in PNG images. We are using dreamweaver and as a designer i think you should have idea for swapping images in menu. Dreamweaver creates js code and place in our page. this help in menu. Now in my layout i needed to use .png files. Somehow i have set main image to transparent but swapped images are not coming properly. can anyone help. here is my code
this pngfix.js is working fine for me
i have get this file from http://homepage.ntlworld.com/bobosola/pnghowto.htm
if you find any solution than do let me know.
Thank you
May 26th, 2009 at 8:55 am
@Tejas – use css sprites
June 7th, 2009 at 12:10 pm
This method is very effective. Thanks.
I’m trying to apply a behavior to the rest of transparent PNG’s to all pages. Below is my code and its not working any help would be much appreciated:
img {
behavior: expression((this.runtimeStyle.behavior=”none”)&&(this.pngSet?this.pngSet=true:(this.nodeName == “IMG” && this.src.toLowerCase().indexOf(‘.png’)>-1?(this.runtimeStyle.backgroundImage = “none”, this.runtimeStyle.filter = “progid:DXImageTransform.Microsoft.AlphaImageLoader(src='” + this.src + “‘, sizingMethod=’scale’, enabled=’true’)”, this.src = GetStyleUrl()+”images/blank.gif”):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace(‘url(“‘,”).replace(‘”)’,”), this.runtimeStyle.filter = “progid:DXImageTransform.Microsoft.AlphaImageLoader(src='” + this.origBg + “‘, sizingMethod=’crop’)”, this.runtimeStyle.backgroundImage = “none”)),this.pngSet=true));
}
Many thanks!
June 7th, 2009 at 6:59 pm
@Chad – I’m not a big fan of CSS expressions. There are couple of ready solutions with some htc files.
Generally pngs are used for the interface (buttons, bullets, etc). so if you use sprites you will have to fix only one image.
June 26th, 2009 at 9:34 pm
I very very veryyyy Happy!!!! Tranks
September 2nd, 2009 at 9:45 pm
Great, did not want to use any javascript, and since I separate my css for ie6 and have it be conditional, everything seems go. What about png’s on the site?
September 3rd, 2009 at 3:14 pm
@Kam – don’t understand your question. The example provided does not use javascript and will work great with conditional css.
November 6th, 2009 at 4:05 pm
I have given in CSS a PNG image repeat X in the background. But it as some issue in ie6…. Kindly help me
My code is .
height:60px;
text-align:left;
vertical-align:top;
background-image: url(../Images/Top_Shadow_bg.png);
background-repeat: repeat-x;
background-color:#FFCC00;
Kindly do teh needful
November 6th, 2009 at 6:33 pm
@Arun repeat-x won’t help you in IE6 check the demo above.
December 16th, 2009 at 8:09 am
need help… i’ve used ur code in my website, but it doesn’t work…
i use xoops for my website and the css code is in external file (ex:style.css)…
Here is my code:
.center-box-l {
background-image: url(img/center-box-l.png);
background-repeat: repeat-y transparent;/
background-position: right top;
width: 10px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=’true’, sizingMethod=’scale';, src=’img/center-box-l.png’);
any idea… very need help… plzzz
December 17th, 2009 at 1:22 am
@iera – background-repeat: repeat-y transparent;/ what is that slash? Contact me on skype if you can’t resolve it
December 17th, 2009 at 3:37 am
sorry peter, the slash is typo error here (my mistake, just ignore the slash)..
i can’t use skype… can u just emel me..
tq very3x much..
December 18th, 2009 at 11:18 pm
This worked for me, it left me use a .png image on repeating background on ie6. – http://www.dillerdesign.com/experiment/DD_belatedPNG/
February 18th, 2010 at 12:14 am
Yay!! I’ve been looking so long for a fix to this. Thank you!!
June 3rd, 2010 at 9:47 am
Good Job, We Already Used
May 24th, 2011 at 3:45 am
works perfectly..!!!!..thanks..have been looking for this fix for quite a while..Eureka!!!!
October 19th, 2011 at 7:08 pm
I have recently written this article to show you how to export png 8 in Fireworks. http://tocs-i.com/blog/how-to-export-transparent-pngs-from-fireworks-that-have-a-small-file-size-and-work-in-ie6/