StylizedWeb

Subscribe to our updates:

A Design, WordPress and Tutorials Blog.

Dedicated to helping you learn the art and science of the web.

PNG transparency issues

If you are CSS coder, you've probably ran in to png transparency problems many times. Even Microsoft is having problems with it http://runonce.msn.com/runonce2.aspx open in IE6. So I'll tell you few problems and solutions I've handled so far.

First one is if you need just simple transparent image, without some special needs for example backgrounds etc. The solution would be png fix. I've used it many times but it has lots of faults, for example with padding, margins and absolute positioning. Sometimes i can mess up the rest of your JavaScript files, but anyway very useful script. You can download it here http://homepage.ntlworld.com/bobosola/pngfix.js and just include it in your <head> tag

PNG

  1. <!--[if lt IE 7.]>
  2. <script defer type="text/javascript" src="pngfix.js"></script>
  3. <![endif]-->

The second one can partly handle issues from first and it's pure CSS solution. I mostly use this for backgrounds, because if your path for a background is from CSS file then png fix can't handle it.

PNG

  1. .someelement {
  2. background-image: url(images/image.png);
  3. }
  4.  
  5. * html .someelemen {
  6. background-color: #333;
  7. back\ground-color: transparent;
  8. background-image: url(images/blank.gif);
  9. filter: progid:DXImageTransform.Microsoft.
  10. AlphaImageLoader(src="images/image.png", sizingMethod="scale");
  11. }
  12.  

I found this very useful, and also when you add some hover effects for example some color or other image. You can see live example here
NOTE: This simple hover is just example and it doesn't work in IE6

  1. .someelement:hover {
  2. background: #333;
  3. }
  4.  
  5. .someelement:hover {
  6. background-image: url(images/image2.gif);
  7.  
  8. }
  9.  

Only problem I had with this was with <a> tag, link just don't work (when it's in div with this kind of background) and i don't know why (talking again for IE6). And only solution i could think of was to place another absolute div over it for the links, content etc... Yes i know it's not elegant but it works if content is not dynamic.

Luckily more and more people are starting to use IE7, and i must say i have recently switched too, i had to have IE6 because of testing my code and when i found out for Multiple IE program I switched immediately ;)

Leave a comment on Stylized Web Have some feedback? Leave a comment

177 Comments So Far

  1. By Majda posted on December 30, 2007 at 10:23 pm

    Wow,thanks. I didn’t know about this solutions of png transparency problems…

  2. By Zoran posted on December 30, 2007 at 11:06 pm

    Thanks, for the great article, I also had few png problems and this helped me figure some of them out.

  3. Hi Dejan, can you tell me if this “AlphaImageLoader(src=”imag..” is in same row as “filter: pro...” ? I guess it is?

  4. By Dejan posted on December 31, 2007 at 12:06 am

    @ Stan
    Yes you are right thanks for pointing it out, but i thought it will be obvious without ; at the end of the row

  5. By Anders posted on January 11, 2008 at 9:39 am

    You’ve seem to forgotten about the wonderful js library IE7

  6. By Erik posted on January 13, 2008 at 7:16 pm

    Hi, did you know any way to use background-position with png transparency on ie < 7?

  7. By Dejan posted on January 13, 2008 at 7:20 pm

    @ Erik
    Well you just treat it like regular image, for example
    background: url(image.png) top left;

  8. By markuz posted on February 7, 2008 at 3:27 am

    To make the links inside a div with a transparent background work, just add:

    .someelement a {
    position: relative;
    }

  9. By Jerome posted on February 12, 2008 at 10:39 am

    Hi there,

    I got a prob with pngfix.js that works well and takes out all the errors of pngs when rendering in IE6 but the prob is that my links now do not work in my main content. http://www.gbackup.co.za.

    Tried everything and cant find a sol..
    Please can anyone help???

  10. By Dejan posted on February 12, 2008 at 10:52 am

    Hi Jerome,
    I’ve looked at your site and the problem is in position:relative;
    Header and footer links are working but content wrapper is relative and all inner divs. So just change that and let me know if it’s working

    Also you can post your question on KnowHow forum for more help

  11. By Dejan posted on February 12, 2008 at 10:55 am

    and one more thing, where ever you are using float links are working so try to float rest of content that should help

  12. By Jerome posted on February 12, 2008 at 11:19 am

    Thanks a lot…
    Just tried it and it works…oh my oh my… I got stuck on it for 1 and half day, thanks again.
    Cheers.
    Have a good day

    jerome

  13. There is another way, and it even works for PNG in CSS backgrounds.

    http://www.twinhelix.com/css/iepngfix/

    regards

  14. There is a great solution, which fixes a lot of issues with ie6 and lower. And implements png transparency.

    I found it by chance through an article over at 24 ways. Its by Dean Edwards:

    http://dean.edwards.name/ie7/

    And there is a google.code page to it:

    http://code.google.com/p/ie7-js/

    it has worked fine for me so far :)

  15. Pingback: » I 10 migliori hack per CSS | DoZ-log |

  16. Pingback: 10 best CSS hacks « DELE DURO!!!

  17. Pingback: Thatgrafix Web Design Portland Oregon

  18. Pingback: CSS-FAQ » Blog Archive » CSS Hacks for You! (First Serving)

  19. Pingback: NilDesign.ru » 10 лучших CSS хаков + кроссбраузерность

  20. Be aware that IE6 can deadlock when using the AlphaImageLoader. I wrote about it at http://blogs.cozi.com/tech/2008/03/transparent-png.html

  21. Pingback: 10 best CSS hacks « Share4Vn.com Blog

  22. What works perfectly with IE? That’s the question! Thank you for interesting article! Take care. Luke

  23. By Dejan posted on March 25, 2008 at 2:38 pm

    @ Luke
    Well everything from this, just use on or another for different things as in text ;)

  24. There’s always problem with IE alpha deadlock… What a crap!

  25. Pingback: 10 best CSS hacks

  26. Pingback: Internet Explorer 6 için saydam PNG desteği » Tekil Yazı » Fatih Hayrioğlu'nun not defteri

  27. thank you nice sharing

  28. I’m using pngfix.js now, didn’t know it had issues. I totally ran into the css bg png issue not rendering… thanks for this article. For my css bg tricks, i’m going back to good old gifs for the time being.

  29. I love this blog, thanks.

  30. Thanx

  31. Pingback: positioning seo

  32. Dostum cok gusel css Birazda türkce yazsanız daha iyi olmucakmı :)

  33. exelente muchas gracias !!!

  34. Pingback: SEO Elite Review

  35. I’m using pngfix.js now, didn’t know it had issues. I totally ran into the css bg png issue not rendering… thanks for this article. For my css bg tricks, i’m going back to good old gifs for the time being

  36. There’s always problem with IE alpha deadlock… What a crap!

  37. I love this blog, thanks.

  38. and one more thing, where ever you are using float links are working so try to float rest of content that should help

  39. What works perfectly with IE? That’s the question! Thank you for interesting article! Take care. Luke

  40. Thank you
    Best Posting

  41. What works perfectly with IE? That’s the question! Thank you for interesting article! Take care.

  42. Pingback: A brand new PNG fix for IE6 | StylizedWeb.com

  43. Pingback: Email:luvAdobe@gmail.com » 10 best CSS hacks

  44. Pingback: Best Css hacks · Css Edge :: Your best CSS resource guide

  45. this helped me so much! Thank you…

  46. Pingback: 10 Great CSS Hacks « Thatgrafix Blog

  47. thank you

  48. Thx

  49. thank you

  50. Pingback: 10 best CSS hacks - namastec.info

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>