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.
17 Comments Received
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!
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!
thanks..
How repeat-x the png ????
Unfortunately you can not repeat the PNG using this hack.
thanks
Thanks this is very helpfull…
Pingback & Trackback
Leave A Reply