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

Be Sociable, Share!

Tags: , , , , , ,

44 Responses to “IE6 PNG Transparency CSS background-repeat Fix”

  1. eligio Says:

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

  2. e devlet Says:

    css background examples , Properties , Attribute – – css-lessons.ucoz.com/background-css-examples.htm

  3. Peter Says:

    @e devlet what are you trying to say ?

  4. Elisa Says:

    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. Razer Says:

    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. Louis Lazaris Says:

    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.

  7. Peter Says:

    @Louis Lazaris

    It doesn’t matter where it is placed.
    Please supply some example where it was not ok

    Cheers

  8. Tom @ m360 Says:

    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

  9. Ash Says:

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

  10. james Says:

    Just make big images which cover the whole area… FIXED…

  11. Leon Says:

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

  12. Leon Says:

    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. javed Says:

    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. Peter Says:

    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. Turo Says:

    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.

  16. Peter Says:

    probably your path is wrong try absolute for the test. Also always use lowercase for names

  17. ben Says:

    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

  18. Peter Says:

    it seems ok for the big divs. If you have problems with the links, be sure to put position:relative

  19. ben Says:

    thanks for the help!!! it works!!!

  20. Evolved Says:

    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. ben Says:

    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

  22. Peter Says:

    @ben – Send me link on my mail and I will try helping

  23. safal Says:

    Nice. Thank you for the solution.

    It makes me frustrating.
    Now I am relaxed

    Thanx

  24. randi Says:

    i need help getting background on my internet

  25. Peter Says:

    @randi – Where is your internet?

  26. Tejas Says:

    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

  27. Peter Says:

    @Tejas – use css sprites

  28. Chad Says:

    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. Peter Says:

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

  30. Jefferson Says:

    I very very veryyyy Happy!!!! Tranks

  31. Kam Says:

    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. Peter Says:

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

  33. Arun Says:

    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

  34. Peter Says:

    @Arun repeat-x won’t help you in IE6 check the demo above.

  35. iera Says:

    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

  36. Peter Says:

    @iera – background-repeat: repeat-y transparent;/ what is that slash? Contact me on skype if you can’t resolve it

  37. iera Says:

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

  38. toni Says:

    This worked for me, it left me use a .png image on repeating background on ie6. – http://www.dillerdesign.com/experiment/DD_belatedPNG/

  39. Kerri Says:

    Yay!! I’ve been looking so long for a fix to this. Thank you!!

  40. Nirmik Says:

    Good Job, We Already Used

  41. phoenix27 Says:

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

  42. Scott Says:

    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/

Leave a Reply