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

.someelement {
background-image: url(images/image.png);
}
 
* html .someelemen {
background-color: #333;
back\ground-color: transparent;
background-image: url(images/blank.gif);
filter: progid:DXImageTransform.Microsoft.
AlphaImageLoader(src="images/image.png", sizingMethod="scale");
}
 

.someelement:hover {
background: #333;
}
 
.someelement:hover {
background-image: url(images/image2.gif);
 
}
 

95 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. By Stan posted on December 30, 2007 at 11:21 pm

   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. By Ian posted on February 17, 2008 at 12:28 pm

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

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

    regards
14. By andrej posted on February 19, 2008 at 3:22 pm

    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. By George Reilly posted on March 11, 2008 at 1:49 am

    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. By Strony Internetowe posted on March 25, 2008 at 9:59 am

    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. By Cornices posted on April 10, 2008 at 9:29 am

    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. By cep program posted on May 5, 2008 at 4:07 pm

    thank you nice sharing
28. By David Martinez posted on May 19, 2008 at 12:23 am

    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. By Orides Tomkiel posted on May 28, 2008 at 12:37 pm

    I love this blog, thanks.
30. By knight online posted on May 31, 2008 at 3:22 pm

    Thanx

31. Pingback: positioning seo

32. By ilaçlama posted on June 7, 2008 at 7:25 pm

    Dostum cok gusel css Birazda türkce yazsanız daha iyi olmucakmı
33. By ctraos posted on June 16, 2008 at 2:00 am

    exelente muchas gracias !!!

34. Pingback: SEO Elite Review

35. By bjk posted on July 20, 2008 at 4:33 am

    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. By Led Ekran posted on July 20, 2008 at 4:33 am

    There’s always problem with IE alpha deadlock… What a crap!
37. By Firma Rehberi posted on July 20, 2008 at 4:34 am

    I love this blog, thanks.
38. By Ruby posted on July 20, 2008 at 4:35 am

    and one more thing, where ever you are using float links are working so try to float rest of content that should help
39. By ödev posted on July 20, 2008 at 4:36 am

    What works perfectly with IE? That’s the question! Thank you for interesting article! Take care. Luke
40. By Cansel Ünbay posted on July 20, 2008 at 4:36 am

    Thank you
    Best Posting
41. By Oyunlar posted on July 20, 2008 at 4:37 am

    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. By BilgiDeposu posted on August 31, 2008 at 10:03 am

    this helped me so much! Thank you…

46. Pingback: 10 Great CSS Hacks « Thatgrafix Blog

47. By cem posted on October 19, 2008 at 6:22 pm

    thank you
48. By Oyun Hileleri posted on October 19, 2008 at 6:23 pm

    Thx
49. By chat posted on February 2, 2009 at 9:16 pm

    thank you

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