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
Comments
Comment by eligio on 2008-03-03 16:01:57 +0300
The title is misleading “background-repeat fix”. You should change the title, since i don’t see any solution for background-repeat IMO.
Comment by e devlet on 2008-06-17 09:16:50 +0300
css background examples , Properties , Attribute – – css-lessons.ucoz.com/background-css-examples.htm
Comment by Peter on 2008-06-17 12:42:51 +0300
@e devlet what are you trying to say ?
Comment by Elisa on 2008-07-16 11:36:47 +0300
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.
Comment by Razer on 2008-08-03 15:33:02 +0300
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.
Comment by Louis Lazaris on 2008-08-13 18:54:56 +0300
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.
Comment by Peter on 2008-08-14 12:47:13 +0300
@Louis Lazaris
It doesn’t matter where it is placed.
Please supply some example where it was not ok
Cheers
Comment by Tom @ m360 on 2008-09-03 19:28:59 +0300
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
Comment by Ash on 2008-09-13 00:17:24 +0300
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’);
Comment by james on 2008-12-05 12:13:36 +0300
Just make big images which cover the whole area… FIXED…
Comment by Leon on 2009-01-02 19:36:28 +0300
The first solution worked fine for me, created a rollover DHTML popup box wich had a subtle shadow beneath. Thanks.
Comment by Leon on 2009-01-02 19:39:18 +0300
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.
Comment by javed on 2009-01-06 00:28:08 +0300
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…
Comment by Peter on 2009-01-06 00:51:53 +0300
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
Comment by Turo on 2009-02-20 15:08:46 +0300
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.
Comment by Peter on 2009-02-21 03:08:09 +0300
probably your path is wrong try absolute for the test. Also always use lowercase for names
Comment by ben on 2009-02-22 19:54:06 +0300
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
Comment by Peter on 2009-02-23 15:06:02 +0300
it seems ok for the big divs. If you have problems with the links, be sure to put position:relative
Comment by ben on 2009-02-28 17:49:57 +0300
thanks for the help!!! it works!!!
Comment by Evolved on 2009-03-08 02:16:01 +0300
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.
Comment by ben on 2009-03-09 09:52:11 +0300
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
Comment by Peter on 2009-03-09 14:46:58 +0300
@ben – Send me link on my mail and I will try helping
Comment by safal on 2009-04-22 12:31:02 +0300
Nice. Thank you for the solution.
It makes me frustrating.
Now I am relaxed
Thanx
Comment by randi on 2009-05-21 23:31:28 +0300
i need help getting background on my internet
Comment by Peter on 2009-05-22 00:41:27 +0300
@randi – Where is your internet?
Comment by Tejas on 2009-05-25 12:56:48 +0300
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
Comment by Peter on 2009-05-26 08:55:32 +0300
@Tejas – use css sprites
Comment by Chad on 2009-06-07 12:10:39 +0300
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!
Comment by Peter on 2009-06-07 18:59:42 +0300
@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.
Comment by Jefferson on 2009-06-26 21:34:10 +0300
I very very veryyyy Happy!!!! Tranks
Comment by Kam on 2009-09-02 21:45:06 +0300
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?
Comment by Peter on 2009-09-03 15:14:15 +0300
@Kam – don’t understand your question. The example provided does not use javascript and will work great with conditional css.
Comment by Arun on 2009-11-06 16:05:07 +0300
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
Comment by Peter on 2009-11-06 18:33:47 +0300
@Arun repeat-x won’t help you in IE6 check the demo above.
Comment by iera on 2009-12-16 08:09:30 +0300
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
Comment by Peter on 2009-12-17 01:22:27 +0300
@iera – background-repeat: repeat-y transparent;/ what is that slash? Contact me on skype if you can’t resolve it
Comment by iera on 2009-12-17 03:37:50 +0300
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..
Comment by toni on 2009-12-18 23:18:31 +0300
This worked for me, it left me use a .png image on repeating background on ie6. – http://www.dillerdesign.com/experiment/DD_belatedPNG/
Comment by Kerri on 2010-02-18 00:14:59 +0300
Yay!! I’ve been looking so long for a fix to this. Thank you!!
Comment by Nirmik on 2010-06-03 09:47:11 +0300
Good Job, We Already Used
Comment by phoenix27 on 2011-05-24 03:45:27 +0300
works perfectly..!!!!..thanks..have been looking for this fix for quite a while..Eureka!!!!
Comment by Scott on 2011-10-19 19:08:15 +0300
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/