Simple, Cross-Platform PNG Transparency Support
Posted by Corey Ehmke on February 27th, 2008 in General Tech & Development | Permanent Link | Share/SaveOne of Internet Explorer’s famous shortcomings is its lack of native support for transparency in PNG images—one of the very characteristic that makes PNGs so appealing to begin with. Here’s how to incorporate transparent PNGs into your site in a way that all browsers will handle, using only Cascading Style Sheets (CSS).
1) The Approach
We’re going to put each image into the document twice: once in a way that Internet Explorer will understand, and once in a way that standards-compliant browsers can understand. In both cases, we’re going to use an appropriately classed <div> element:
<div class="png_standard"><img src="my_graphic.png" width="150" height="294"></div><div class=”png_ie” style=”width=150; height=294; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’my_graphic.png’, sizingMethod=’scale’);”></div>
This results in one image and an empty <div> showing up for Firefox and Safari, and two images (the first without transparency) showing up in IE. Note that you must specify the height and width of the image in the style tag of the png_ie <div>!
2) The Following Line is True. The Preceding Line is False.
Now we’re going to use CSS selectors to only show the <div> that’s appropriate for the browser. It’s crucial that these CSS rules are included in your style sheet in the order presented!
We’re going to take advantage of a non-standard CSS selector that only IE recognizes: * html.
div.png_standard {display: block;}
div.png-ie {display: none;}
* html div.png_standard {display: none;}
* html div.png_ie {display: block;}
Read from top to bottom, these rules state:
- Display any <div> with class=”png_standard” in the normal way.
- Do not display any <div> with class=”png_ie”
- If you are IE and can read this, hide any <div> with class=”png_standard”
- If you are IE and can read this, show any <div> with class=”png_ie”
3) The Last Step
Actually, there is no last step That’s it! For standards-compliant browsers, the <div> containing the transparent PNG is displayed normally, and the <div> containing the ugly IE code is hidden away. For IE, the <div> that it does not understand remains hidden, and it renders the <div> that forces it to recognize PNG transparency.
Transparent PNG in Internet Explorer for Windows:
And in Safari for Mac OS X:
4) Sample Code
Assuming that you have a PNG named my_image.png, the following page will render appropriately in all browsers:
<html>
<head>
<style type="text/css">
div.png_standard {display: block;}
div.png-ie {display: none;}
* html div.png_standard {display: none;}
* html div.png_ie {display: block;}
body { background-color: #bdbdce; }
</style>
</head>
<body><div class="png_standard"><img src="my_graphic.png" width="150" height="294"></div>
<div class="png_ie" style="width=150; height=294; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='my_graphic.png', sizingMethod='scale');"></div></body>
</html>
August 12th, 2008 at 1:38 pm
Bloody lifesaver - cheers dude!
tk