Posted on by Peter

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:

  1. Use sizingMethod=’scale’
  2. Use flash for rendering the png
  3. 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:

Preview for IE6 PNG background-repeat

For more info see the demo under Internet Explorer 6

42 Replies to “IE6 PNG Transparency CSS background-repeat Fix”

  1. The title is misleading “background-repeat fix”. You should change the title, since i don’t see any solution for background-repeat IMO.

  4. 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.

  5. 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.

  6. 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.

  9. 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’);

  11. The first solution worked fine for me, created a rollover DHTML popup box wich had a subtle shadow beneath. Thanks.

  12. 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.

  13. 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…

  14. 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

  15. 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.

  17. 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

  20. 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.

  21. 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

  26. 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

  28. 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!

  29. @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.

  31. 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?

  32. @Kam – don’t understand your question. The example provided does not use javascript and will work great with conditional css.

  33. 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

  35. 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

  37. 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..

  41. works perfectly..!!!!..thanks..have been looking for this fix for quite a while..Eureka!!!!

Comments are closed.