visitor stats

Make PNG transparency work in Internet Explorer

Directly inserting images in PNG format with transparency will leave you with a white spot when display in Internet Explorer. It makes your image looks ugly and this is really the last thing any web designer or webmaster would want on their website. Here’s a solution on how to solve this white spot and let the PNG transparency recovers.

Let’s take a look at the difference of PNG images (with transparency) on both major browsers: Mozilla Firefox and Internet Explorer 6

Mozilla Firefox

PNG with transparency blends in nicely with no problem

PNG image in Mozilla Firefox

Internet Explorer 6

Internet Explorer does not turn your transparency transparent, thus leaving you with a big ugly white spot.

PNG image in Internet Explorer

Solution

Create a container to store your image. In this case I use a <div>.
Create your <div> inside your <body>, just like this.

<body> <div class="flower"></div> </body>

Next, create a <style> if you dont have one. Make sure they are between your <head> </head>. Put the following css inside.

<style>
body {background-color:#000}
div.flower {background:url(flower-transparent.png) no-repeat; height:100px; width:100px}
</style>

The CSS codes above displays your PNG image in a <div>. Works fine for Mozilla Firefox, but not for Internet Explorer. To get it working cross browser, create another set of css just for Internet Explorer right below your <style> </style>. Insert the following codes.

<!–[if gte IE 5]>
<style type="text/css">
div.flower {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’flower.png’ ,sizingMethod=’crop’);
}
</style>
<![endif]–>

Your IE should now give you a perfect blend like the picture below.

PNG image in Internet Explorer

Download my working example.

Posted by hongkiat in Web Tricks, at 12.17.06

Tags: , , , ,

Related Contents

Sponsors

Comments

  1. Jason

    December 17th, 2006 at 11:00 pm

    Cool! Never knew it could be done that way.

    comment

  2. tihtahpah

    December 18th, 2006 at 7:28 am

    oi..hongkiat..i linked u to my blog :) good stuff…hitswhore!

    comment

  3. Adam

    December 18th, 2006 at 9:57 am

    Yea I couldn’t be bothering doing to to my site, I’ve got so many PNGs on there any majority of people use Firefox and soon IE7 so if your lazy.

    comment

  4. Ryan

    December 18th, 2006 at 10:03 am

    There are a few drawbacks to this method.

    The first is that this is an ActiveX filter, so people who have security features blocking ActiveX controls might have a problem seeing it.

    The other is that if you want to put any information inside the div where you have the png as a background, it won’t show up. This AlphaImageLoader puts a mask over the entire div that it’s applied to, so any fields that are interactive won’t be able to be accessed, such as form elements.

    The way to get around this would be to use the following structure:

    #outerdiv { positioning of background and interior information }

    #middlediv { AlphaImageLoader script with png as background, no positioning }

    #innerdiv { positioned inside the above two divs, with your information }

    The innerdiv’s relative/absolute positioning will cause it to float above the background div, letting you get to text fields or form buttons. The outerdiv will let you position this entire thing so that you can move it around the page.

    Hope this adds a little more for those trying it out.

    comment

  5. Ashish Mohta

    December 18th, 2006 at 10:06 am

    Thx for the tip.I was looking for it .

    comment

  6. hongkiat

    December 18th, 2006 at 10:27 am

    Adam:Firefox is soon to be taking over. This is to cover up the loophole of IE6

    Ryan: Your method works too, and thanks for providing another alt solutions to this.

    comment

  7. Daniel Fischer - Got Fisch? » Blog Archive » How to get PNG image transparency working in Internet Explorer

    December 18th, 2006 at 10:34 am

    [...] Oh how I hate IE, at least this hack tells you how to fix one of its hundreds of fatal flaws. *Kicks IE in the face*. Useless Microsoft junk.read more | digg story [...]

    comment

  8. Michael

    December 18th, 2006 at 11:04 am

    …and it doesn’t validate :-(

    comment

  9. Ryan

    December 18th, 2006 at 11:10 am

    I just make my code W3C compliant. If someone wants to use a non-compliant browser, their loss.

    comment

  10. Eric

    December 18th, 2006 at 11:19 am

    Love it, but how can I implement this on an enterprise level? I know I can make my graphic designers drool if I tell them I can seamlessly integrate all those transparent gradients they want to use, but isn’t there a better way than creating 3 DIVs with individual CSS definitions? Can we at least use all this code in the ?

    comment

  11. Ryan

    December 18th, 2006 at 11:26 am

    You only need three divs if you want to position the element, and then also have some interactive elements inside.

    If you just want text, don’t worry about the fact that the AIL filter will mask your div, and just use one.

    comment

  12. brett borders

    December 18th, 2006 at 12:02 pm

    Doesn’t IE 7 handle .png transparencies OK?

    comment

  13. lazy11

    December 18th, 2006 at 12:15 pm

    seriously - WHY ON GOD’S GREEN EARTH would you bother with this?
    look at the fat chunk of shit that you have to maintain now as a result of this senseless hack.
    even maintained a site that uses this “trick”

    no thanks - stick to something simpler - or do a better job when designing.

    you’re asking for trouble.

    comment

  14. john brown

    December 18th, 2006 at 12:28 pm

    Yes, it is a “shitty” solution - but don’t blame the messenger - this is IE’s fault. It’s a “good” hack that opens up fantastic site builds.

    Another downside which is rarely mentioned: there is *NO* way to get alpha transparent PNGs to work in IE using HTTPS (including this hack).

    We’ve also noticed some inconsistencies with color using this method as well.

    Good hack - but test often and KNOW THE LIMITATIONS.

    comment

  15. Making PNG image transparency work in Internet Explorer · Style Grind

    December 18th, 2006 at 12:30 pm

    [...] Hong Kait has a great tutorial on making those pesky PNGs work cross browser: [...]

    comment

  16. Micheal D

    December 18th, 2006 at 12:31 pm

    Well Lazy, I’m not quite agree with your statement. It alwz been a web designer’s dream to have a image format that truly supports tranparency (something better than GIF). no point doing graphics that only cater on the specific background right? Don’t you use gif transparency?

    comment

  17. Jim Geurts

    December 18th, 2006 at 12:38 pm

    There are a couple hacks in javascript to automatically perform this hack, so that you don’t need to manually maintain css files. For example, have a look at the IE7 javascript hack (http://dean.edwards.name/IE7/). It includes many other “fixes” to fix IE’s shitty engine.

    comment

  18. Ryan

    December 18th, 2006 at 12:41 pm

    Lazy11: This isn’t a senseless hack, it’s what you have to do to get a PNG transparency to work. I didn’t write IE, but I did have to figure this stuff out to make IE work correctly.

    And I suppose if we are supposed to do a better job with designing, that means we can never use transparency again?

    IE7 renders alpha channels correctly, so there is only a year or so before most users will have gotten past IE6, and we can look back on this and laugh.

    Until we get to that point, go ahead and shun clever tricks to design a page the way you want, not the way Microsoft wants.

    comment

  19. Christian Trejo

    December 18th, 2006 at 12:50 pm

    Thanks i was needing this, very nice work.

    comment

  20. Prime News Blog » Blog Archive » hentay xmen How to get PNG image transparency working in Internet Explorer

    December 18th, 2006 at 2:04 pm

    [...] hentay xmen Directly inserting PNG images with transparency in Internet Explorer will leaves you with a big white spot in webpages. This tutorial shows you how this can be solved. iceman xmenread more | digg story [...]

    comment

  21. Chef Groovy

    December 18th, 2006 at 4:17 pm

    How many people still use IE5? Everyone won’t be using IE7 in year, or in 4 years.

    cool hack btw

    comment

  22. Łukasz Schabowski // Weblog » Blog Archive » Internet Explorer - przezroczystość PNG

    December 18th, 2006 at 4:22 pm

    [...] 24th Floor - Technology, Web, Tips, Tutorials, Jokes and my life. » Making PNG image transparency work in Internet Explorer [...]

    comment

  23. Cartoons Fans Lounge

    December 18th, 2006 at 5:36 pm

    [...] story No Comments so far Leave a comment RSS feed for comments on this post. TrackBack URI Leave a comment Line and paragraph breaks automatic, e-mail address never displayed, HTMLallowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong> [...]

    comment

  24. Slav Erik

    December 18th, 2006 at 6:35 pm

    I’ve seen this hack before on alistapart, and I’d love to use it but the limitations put me off. Mostly the fact that it wont validate. I like to write accessible semantic xhtml and if that means a little less bling then so be it. After all it may look pretty but what does it add to the value of the page? Not enough to justify the hack IMHO.

    comment

  25. Cyrus

    December 18th, 2006 at 9:05 pm

    At least a possibility, if needed, …

    comment

  26. reddog

    December 18th, 2006 at 9:40 pm

    the easiest way to do this is to simply load pngfix.js by http://dean.edwards.name
    also, do not make it “if gte IE 5″…it is better to make it “if lte IE 6.9″, that way IE 6 and below will use it but now IE7, which does png transparency just fine.

    One note though, and something to try with yours, make an image a link; then see what part of the image is left. I made some style image links for menu. Only the actual image was clickable…the part that was transparent got totally ripped out. Food for thought.

    While I commend your effort, a simple link/attachment in the head of your html to the pngfix.js file cures all the headaches.

    comment

  27. Crazy TV Online

    December 19th, 2006 at 12:24 am

    Great effect but if you use multiple pngs, it means multiple divs and lots more css..dang.

    comment

  28. The Web Design Blog

    December 19th, 2006 at 5:26 am

    [...] Directly inserting PNG images with transparency in Internet Explorer will leaves you with a big white spot in webpages. This tutorial shows you one way how this can be solved. « Adobe Photoshop CS3 beta on friday   [...]

    comment

  29. Roy Tomeij

    December 19th, 2006 at 6:05 am

    Also don’t forget that it looks like a background, but in fact it is an ActiveX object. The problem with this is that you can’t use background positioning. I ran into this trying to use a PNG using this technique and have it align to a DIV’s bottom (for a drop shadow). I could have added an extra DIV, but didn’t since I believe in semantics.

    comment

  30. links for 2006-12-19 at found_drama

    December 19th, 2006 at 9:51 am

    [...] Making PNG image transparency work in Internet Explorer via 24th Floor (via command_tab): A good (and succinct) redux on how to get PNG’s alpha working properly in Internet Explorer. (tags: IE hack CSS png graphics tutorial) [...]

    comment

  31. 陈谦的blog

    December 22nd, 2006 at 2:47 pm

    Links for 2006-12-21 [del.icio.us]…

    24th Floor - Technology, Web, Tips, Tutorials, Jokes and my life. » Making PNG image transparency…

    comment

  32. 煎蛋 » How to get PNG image transparency working in Internet Explorer

    December 22nd, 2006 at 3:17 pm

    [...] Directly inserting PNG images with transparency in Internet Explorer will leaves you with a big white spot in webpages. This tutorial shows you how this can be solved.read more | digg story [...]

    comment

  33. 鬼仔’s Blog » links for 2006-12-23

    December 23rd, 2006 at 9:20 am

    [...] 如何在 IE 上让 PNG 图片显示透明效果 无损压缩的 PNG 格式越来越招 web 设计人员的喜爱,但是直接在页面中插入一个透明背景的 PNG 图片后在 IE 里会显示成难看的空白。这篇教程用一段代码完美的解决了问题,详见原文。 (tags: ie) [...]

    comment

  34. su27

    December 23rd, 2006 at 7:13 pm

    pretty good method for the stupid IE.

    comment

  35. Awb

    January 2nd, 2007 at 6:31 am

    Doesn`t work for me. I get no image. Moreover, I get no more image even in Mozzila and Opera. The code is probably interfering with something… My properties are defined into a separate .css file. How do you integrate that piece of code into the .css file? Bloddy I.E….

    comment

  36. hongkiat

    January 2nd, 2007 at 9:26 am

    perhaps you can send me your codes and I’ll take a look for you

    comment

  37. Easy Webbers » Speedlinking Week 1 (2007)

    January 3rd, 2007 at 2:26 am

    [...] Making PNG image transparency work in internet explorer. [...]

    comment

  38. Keith D Commiskey

    January 9th, 2007 at 12:24 am

    Not sure why folks would criticize something that simply provides an additional possible approach for something that may help even just a couple other folks. If it doesn’t help you, fine… but from what I’ve read, it does help quite a few others.

    I probably won’t use it, but I like the thoughts and information provided, the positive follow-ups, and the time you took to share your findings.

    Negative comments should never discourage innovation…

    comment

  39. deef

    January 10th, 2007 at 5:13 am

    A long and interesting read. I have just finished a site for a local rock band and wanted the eye-candy that I think should go with that type of site. Png’s offer the creative flexibility I want. so any help to get around sodding IE is to be applauded. I’m glad that the majority of comments have been positive even if those commenting may not use this particular fix. Respect to anyone who offers solutions to problems. It’s how things move forward. No?. Personally I’m glad I found this site. Cheers.

    comment

  40. michael

    February 15th, 2007 at 6:53 am

    is there a way to get this to work from an inported css in a conditional comment? - I can get it to work inline but not via inport

    comment

  41. michael

    February 15th, 2007 at 6:56 am

    ** import that is

    comment

  42. MyLiveSignature: Bring Analogue back to Digital Signature

    March 21st, 2007 at 8:02 pm

    [...] signature image comes in PNG format and is really flexible to be used in any medium. Read "Make PNG transparency work in Internet Explorer" if you have problem blending them to a [...]

    comment

  43. zacksmith

    March 31st, 2007 at 8:59 am

    thanks for explaining this! good stuff!

    comment

  44. Amr Shimi

    April 21st, 2007 at 7:50 pm

    At my site, I’ve used the following pngfix.js downloadable from http://alufis35.uv.es/websvn/filedetails.php?repname=spip&path=%2Fmollio%2Fbranches%2F1.9%2Fjs%2Fpngfix.js&rev=0&sc=0

    Regards
    Pablo
    ===================================================
    Thats really brilliant ;) well done,
    now i dont have to put the image in div and add a style.

    Regards,
    Amr

    comment

  45. Jan

    April 24th, 2007 at 11:11 pm

    This works in IE but sadly, nothing shows up in Firefox :(

    comment

  46. Hairgel_Addict

    May 19th, 2007 at 7:15 am

    first of all, thanks a lot for the solution, i’ve been looking for it for some time :)

    second, there’s a possibility to implement this without conditional comments, since your method is considered as a “hack” why not make it simplerwith the use of another one using just CSS? :)

    The following “hack” works in Firefox, Opera, Konqueror & Safari:

    *|html .classname { }

    and the best thing about this “hack” is that any version of IE doesn’t “see” it. So you can have:

    div.flower {
    background:none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’flower.png’ ,sizingMethod=’crop’);
    }

    *|html div.flower {background:url(flower-transparent.png) no-repeat; height:100px; width:100px}

    without cluttering up HEAD section :)

    oh, and btw wordpress doesn’t play well with apostrophes… you might want to insert code section inside <code> tags, so that when people copy/paste it they won’t have any problems. sorry, if that was mentioned somewhere above in comments, didn’t read ALL of them :)

    comment

  47. hongkiat

    May 19th, 2007 at 3:06 pm

    That’s good, thanks for the tips :-)

    comment

  48. Make PNG transparency work in Internet Explorer

    June 7th, 2007 at 5:57 am

    [...] everyone knows how to do this but I thought that this might be a useful article for some people! Make PNG transparency work in Internet Explorer Registered users do not see these adverts. Register for free now __________________ If [...]

    comment

  49. Amitav Roy

    June 9th, 2007 at 1:23 pm

    hey man thanks so much for the nice tip. i can use it in many places.

    comment

  50. Jackson Capper

    June 20th, 2007 at 2:38 pm

    This is a fantastic solution, and have been using it for a while now with really good results. The hack is definately well worth it, and I don’t see why people have to post useless negative comments when it’s obviously helping people.

    comment

  51. I hate IE

    June 22nd, 2007 at 10:29 am

    The image appears blank in firefox or safari on windows or a mac. I even tried your example.

    comment

  52. anime fetish

    July 9th, 2007 at 6:01 pm

    anime fetish…

    anime fetish…

    comment

  53. uniform sex series

    July 9th, 2007 at 7:00 pm

    uniform sex series…

    uniform sex series…

    comment

  54. Eric

    July 23rd, 2007 at 2:36 am

    Ryan,

    that was a great fix. i am using a conditional statement to pull a specific div for IE that will allow for png backgrounds. I then relatively positioned another div inside and the form works.

    thanks

    comment

  55. چه كنيم كه فايلهاي PNG در Internet Explorer هم پس زمينه شفاف داشته باشند « باور

    September 6th, 2007 at 6:00 am

    [...] شفاف، شفافيت، اينترنت اكسپلورر لينك به منبع لاتين: Make PNG transparency work in Internet Explorer دانلود كد: [...]

    comment

  56. eleven3 » Blog Archive » building with layers and pngs

    September 11th, 2007 at 5:01 pm

    [...] Make Transparency Work in Internet Explorer Cross-Browser Variable Opacity with PNG: A Real Solution The main difference between cutting and overlapping websites is thinking of your html/css as an extension of photoshop, versus an extension of something like imageready. Photoshop comps are designed and built with layers, transparency, and the grid in mind. Imageready takes what is in photoshop, flattens it and cuts it up into pieces, which are to be put together with html and css. The two sites that inspired this post both have use of pngs. The first, Bedford Brown, designed by Jeff Reynolds drops a big hood ornament on the website and it looks great, not to mention adds depth and interest. The second, was my attempt at borrowing some of that element for Nicholas Galanin’s website. [...]

    comment

  57. Feli

    November 28th, 2007 at 3:22 pm

    Does the PNG repeatable in IE?

    comment

  58. steve

    January 3rd, 2008 at 6:17 am

    another way to do this is to add a background color to the PNG file. IE6 and lower will display the background colors; other browsers will obey your transparency instructions. A utility called “TweakPNG” can do this: http://www.mywebsite.force9.co.uk/png/edit-png.htm

    Adding a background color using this utility is NOT the same as adding a layer in Photoshop, matching the colors and flattening layers. You are actually editing the PNG files specifications.

    I realize this won’t work where your background isn’t simple but this solution doesn’t require any coding at all.

    comment

  59. 如何让PNG格式的透明图片在IE6下正常显示 | 帕兰卓一得

    January 20th, 2008 at 9:17 am

    [...] 原文: Make PNG transparency work in Internet Explorer 翻译:PARAN [...]

    comment

  60. Psycho Ape

    January 29th, 2008 at 1:55 am

    yea this doesn’t work in IE5 or IE6, just checked it’s not working for me.

    comment

  61. Darcy

    February 20th, 2008 at 11:52 am

    The working example doesn’t work because the image is linked as “flower.png” in one place and “flower-transparent.png” in another. With that changed, it works properly in FF and IE6.

    comment

  62. Panakaj

    February 25th, 2008 at 1:40 pm

    yes in sample code, name of the image need to change. But problem is that in IE6 I’m getting a security warning.

    comment

  63. Blog Design Review - Webmaster Malaysia Forum

    April 3rd, 2008 at 11:21 am

    [...] the coding for IE6 to accept transparency u can have a look at here if u have problem fixing it Make PNG transparency work in Internet Explorer Boonage - Freedom is [...]

    comment

  64. diego nunes

    April 17th, 2008 at 4:07 am

    . . It’s always good to notice that sometimes this technique won’t work unless you explicit specify width and height for the container element.
    . . Altought you did it in the article, you didn’t stressed out this need and most people won’t do that (’cause most of time it’s not a desirable behavior).

    . . Amplexos.

    comment

  65. Honza Odvárko

    May 4th, 2008 at 2:20 am

    Good work,

    just one thing to make it perfect - rename flower-transparent.png to flower.png since CSS in transparency.html is written for this image. In article itself there are also mentioned two different filenames, but I suppose that only one image needed.

    comment


Leave a reply