<!--[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);
 
}
 

92 Comments So Far

1. By Michael Blume posted on March 17, 2009 at 10:30 am

   Nice, I will try transparent pictures next time
2. By Trey Brister posted on March 31, 2009 at 6:13 pm

   I could have workaround using IE filters but that defeats the purpose of image caching as images are filtered per instance not per image.

   Instead I went the simple route. IE6 uses PNG8 transparency just fine. It is just index transparency not alpha transparency which sucks.

   Solution use photoshop to save PNG24.

   Then open with fireworks and save as PNG8 with alpha transparency. (photoshop wont do this.)

   Final Result. Beautiful alpha on modern browsers. And ugly index transparency (GIF Style) on IE6 with no CSS hacks.

   Trey (Web Standard CSS) Brister
3. By informatique posted on April 13, 2009 at 9:33 am

   Hi. Thank you for your CSS Hack. But does it work for old navigators ?
4. By oyunindiryukle posted on May 14, 2009 at 9:33 am

   Play Free Online Games, sports games, massive multiplayer games, action games, puzzle games, flash games and more, casual games.
5. By kaynak teli posted on May 14, 2009 at 4:44 pm

   INTERFERENCE FOREIGN TRADE web environment
   We offer all products with the best service initiatives, improving the quality of service the products you ihtal web environment provides a detailed way. Category dedicated to the product range with the desired structure, providing convenient access to products from our web site to review the order or request for information from the contact form to reach us
6. By Jamie Allsop posted on June 18, 2009 at 8:43 am

   When I want an image with a transparent background and knowing that PNG’s don’t work in IE6, I will save the image as a GIF with no background and that works just the same as a PNG.
7. By www.csidedektiflik.com posted on July 10, 2009 at 12:46 am

   Thank you. It’s good for me.
8. By www.csidedektiflik.com posted on July 19, 2009 at 8:36 am

   I love this blog, thanks
9. By www.csidedektiflik.com posted on July 20, 2009 at 11:50 am

   Thanks for your work and for your comment
10. By Razzaq Bashir posted on August 29, 2009 at 11:16 am

    This is a great script to solve the .PNG issues in IE 6.
11. By Clay posted on October 1, 2009 at 11:28 pm

    Nice looking site you’ve got here. Thanks for the tip!
12. By awaidgips posted on October 9, 2009 at 6:04 am

    автор, хорошо пишешь, продолжай в том же духе
13. By Dindigul posted on November 27, 2009 at 7:10 am

    Good Script. thank u
14. By Media Street posted on February 7, 2010 at 2:20 pm

    Nice script and solution.
15. By South West Balloon Flights posted on February 8, 2010 at 7:51 pm

    Thanks for the script. Looks nice.

16. Pingback: 10 Best CSS Hacks

17. Pingback: 10 best CSS hacks - Nagpur Chat Room

18. By Tubiletta posted on June 25, 2010 at 12:45 am

    this helped me so much! Thank you
19. By oyun oyna posted on July 17, 2010 at 7:22 am

    this helped me so much! Thank you
20. By Yücel Yılmaz posted on August 7, 2010 at 6:35 pm

    Nice, I will try transparent pictures next time
21. By baterie słoneczne posted on September 5, 2010 at 9:04 pm

    Thanks for really good article. It seems that someone did a great work for all of us. What else I could say? Keep up the good work and don’t be shy
22. By moduły fotowoltaiczne posted on October 10, 2010 at 9:57 pm

    Great share and good news. Thanks for your effort. BTW: your site works superb.
23. By kosmodisk posted on November 4, 2010 at 4:27 pm

    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.

    thank you
24. By Vizyon Film İzle posted on November 15, 2010 at 10:04 am

    Thank you for interesting article
25. By www.altincilek.web.tr posted on December 23, 2010 at 2:13 pm

    http://www.altincilek.web.tr
26. By altinçilek posted on December 23, 2010 at 3:52 pm

    altın cılek
27. By hcg damla posted on February 24, 2011 at 1:11 pm

    Çok Sağol ya mükemmelmiş
28. By uzamax posted on March 6, 2011 at 3:34 pm

    %100 Doğal ve hiç bir yan etkisi olmayan Uzamax’ı keşfedin
    UZAMAX içeriğinde mineral ve vitaminler barındıran, doğal bitkielerden üretilmiş gıda desteğidir. İçeriğinde herhangi bir kimyasal ürün bulunmamakla birlikte tamamen doğal kurutulmuş bitkisel bir karışımdır. Sadece birkaç aylık kullanım kürü sonrasında bile uzamax’ın etkisini hissedeceksiniz.

    Uzamax kullanarak doğal yollarla bünyenize gerekli olan tüm besin, vitamin ve mineralleri vücudunuza almanızı sağlar.izlanda yosun hapı
29. By Saurav Ganguly posted on March 10, 2011 at 10:26 am

    Thanks a lot
30. By sumomax posted on March 22, 2011 at 12:03 am

    is not easy to put on weight
31. By komikoyunlar posted on June 23, 2011 at 8:33 pm

    Thanks There is a great solution, which fixes a lot of issues with ie6 and lower. And implements png transparency.
32. By ankara nakliye posted on June 30, 2011 at 10:21 am

    A beautiful and high quality information.this paper is accurate to be useful. Thanks to the author.
33. By Interactive Marketing posted on August 5, 2011 at 11:10 pm

    Nice script,
    Thanks for the tip..
    
34. By mini admin posted on September 1, 2011 at 7:27 pm

    wooow that was good
35. By Gucci posted on September 3, 2011 at 12:05 pm

    Thanks There is a great solution, which fixes a lot of issues with ie6 and lower. And implements png transparency.
36. By Sowmya posted on September 27, 2011 at 1:08 pm

    What is the solution for direct png images?
37. By Ankara Nakliyat Firmaları posted on October 13, 2011 at 10:29 am

    Thanks for the usefull info at the blog
38. By Gölbaşı Evden Eve Nakliyat posted on October 13, 2011 at 10:32 am

    Thanks for all the usefull info at your blog
39. By Pursaklar Evden Eve Nakliyat posted on October 13, 2011 at 10:41 am

    Thanks for the usefull info at the blog
40. By eryaman evden eve nakliyat posted on October 29, 2011 at 2:07 pm

    A beautiful and high quality information.
41. By afrikan ma­ngosu posted on December 23, 2011 at 7:55 pm

    In A, B, C, high levels of vitamins and beta carotene barındıran­African Mango, form meets guidelines as well as the effect of contributi­ng to the beauty of your hair and skin. Beta Carotene, to ensure the beauty of the skin, night vision to strengthen the immune system against disorders, a variety of infections contribute to the substance.­Those who want to enter the world healthy and permanent form, which is a product of choice for African Mango, now in Turkey. Because people prefer to use a 100% herbal product that helps people to enter the African Mango form a single product.
    http://www­.africanma­ngosiparis­.com/
42. By afrika mangosu posted on January 1, 2012 at 7:10 pm

    Those who want to enter the world healthy and permanent form, which is a product of choice for African Mango, now in Turkey. Because people prefer to use a 100% herbal product that helps people to enter the African Mango form a single product.