How to Make PNG Transparency in Internet Explorer
A PNG is a cross between a JPG and GIF. JPG files are suitable for displaying photographs with non-contiguous color, while GIFs are better suited for showing 256-color line art. PNG files display both types of images equally well and support alpha channels. If an image has alpha channels, you can create dramatic effects by adjusting the image's transparency. Unfortunately versions of Internet Explorer older than IE7 do not support PNG transparency. To display transparent PNGs on these browsers, you will need to add a special filter to your HTML code.
(See reference 1 re JPG, GIF and PNG) .. (See reference 2 re IE7 support, search for "support for full Alpha")
Other People Are Reading
Instructions
-
-
1
Create a new HTML document using Notepad or an HTML editor.
-
2
Add the following code to create a basic Web page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>IE PNG Test</title>
</head>
<body style="background-color:Red";>
</body>
</html>
The background color of this page is red.
-
-
3
Add this <img> tag to the <body> section of the document:
<div style= height: 200px; width: 200px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='xyz.png',sizingMethod='scale');"></div>
Replace "xyz.png" with the name of a PNG image on your hard drive. In this example, the height and width values are set to 200. Replace those values with the dimensions of your PNG file. The AlphaImageLoader filter in the style declaration enables Internet Explorer to add transparency to the PNG and allow the red background to show through.
-
4
Save the file and open it in Internet Explorer 6. You will see the red background through the PNG image.
-
1
Tips & Warnings
PNG files are larger than JPG files. Consider using JPGs instead of PNGs if you do not need transparency or the higher image quality that PNG files provide.
References
Resources
- Photo Credit Transparent ice image by Olga Luttseva from Fotolia.com
