how to use png image in ie6 ?


Create a container to store your image. In this case I use a <div>.
Create your <div> inside your <body>, just like this.

<body> <div class=”flower”></div> </body>

Next, create a <style> if you dont have one. Make sure they are between your <head> </head>. Put the following css inside.

body {background-color:#000}
flower {background:url(flower-transparent.png) no-repeat; height:100px; width:100px}

The CSS codes above displays your PNG image in a <div>. Works fine for Mozilla Firefox, but not for Internet Explorer. To get it working cross browser, create another set of css just for Internet Explorer right below your <style> </style>. Insert the following codes.

<!–[if gte IE 5]>
<style type=”text/css”>
div.flower {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’flower.png’ ,sizingMethod=’crop’);

You may also like...