CSS PNG Hack for Internet Explorer (IE)
Apr
07
It’s been a problem for many developers. How do you create a transparent image for Internet Explorer 6 using a PNG. As you are all probably aware IE 6 does not support transparent PNGs but don’t panic there is a solution.
the solution
This is by no means new; however, I thought it was worth while posting. By using Alpha filters designed specifically for IE we can force Internet Explorer to behave as expected. As shown using the code laid out below:
the code
The CSS source is as below. The first class defines the Alpha filter applied to the containing DIV and also sets a height and width (This has to be the same as the PNGs height and width).
The second class simply hides the original PNG from all versions of Internet Explorer 6 and below. This is applied as we do not want Internet Explorer to see the PNG twice with the non-transparent version still showing.
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’andrewsellick.png’,sizingMethod=’scale’);
height: 50px;
width: 257px;
}
.ie-hide{
border:0px solid #FFFFFF;
_display:none;
}
The HTML is also very simple. Simply add the PNG and wrap it with a containing DIV using the classes as shown below.
<img src="andrewsellick.png" class="ie-hide" alt="Andrew Sellick DOT COM" title="Andrew Sellick DOT COM" />
</div>
It’s as simple as that. Have a look for yourself in the example below.
example
Please have a look at the PNG hack example.
Thanks this is very helpfull..
Here is my question. I am place this on a div that has content inside of the div. When I use this code is doesn’t allow the content to be clicked on. What do you suggest as an alternate or a fix for that?
Hack only works if the CSS is in the head of the html document and not in an externally linked stylesheet. Thanks for the code!
[...] may remember I wrote an article a while ago that CSS PNG Hack for Internet Explorer (IE) which detailed a CSS based approach allowing PNGs to display correctly in Internet Explorer. Well [...]
[...] my previous article "CSS PNG Hack for Internet Explorer (IE)" I showed a commonly used CSS method deployed to enable the usage of PNG’s in Internet [...]
PNG’s can in fact be referenced from an external style sheet. Please see my lastest article on the matter http://www.andrewsellick.com/63/css-png-hack-revisited.
Really helped. Thanks!
[...] formatında görüntülerin problem çıkarmaması için bugün rastladığım birşeyler var. Şu sitede ki CSS kodları sayesinde PNG formatında ki resimleri bütün tarayıcılarda problemsiz [...]
[...] Bu sitede verilen çok basit bir css kodu ile PNG formatını tüm tarayıcılarda (özellikle IE) sorunsuz görüntüleyebilmeniz mümkün. Örneğine ve ve sayfanıza nasıl entegre edeceğinize buradan bakabilirsiniz. [...]
[...] Bu sitede verilen çok basit bir css kodu ile PNG formatını tüm tarayıcılarda (özellikle IE) sorunsuz görüntüleyebilmeniz mümkün. [...]
[...] ie için PNG düzelmelerinden biri. Bağlantı [...]
thanks..
How repeat-x the png ????
Unfortunately you can not repeat the PNG using this hack.
thanks
[...] my previous article "CSS PNG Hack for Internet Explorer (IE)" I showed a commonly used CSS method deployed to enable the usage of PNG’s in Internet [...]
Thanks this is very helpfull…
Wow! This is valuable info, am into all this… cool stuff man
Hey This is great info, am into all this… cool sh!t boy
Wow! This is valuable info, am intrested in it… hot story boy
thanks all!
But, if area with PNG background have HyperLink, so can not click on this hyperlink.
So, why fix it?
Thanks very