Log in

View Full Version : Making the png image to be transparent in mozilla firefox,IE6,IE7 .



ranjita
09-12-2008, 01:23 PM
I have put a png image(whose background is transparent) in my website.
It is displaying perfect in Mozilla firefox but in IE6 and IE7 a lightish background is displaying. So what is the csscoding for displaying that png image perfect in all browser .

Means i want the png image to be transparent in mozilla firefox,IE6,IE7 .

TheJoshMan
09-13-2008, 02:13 AM
There are a few ways to accomplish this...

You could use Microsoft's "Alpha Filter" in your css.... but that's messy and not valid code.

The way that I would suggest personally would be to use an htc file.

Here's an example:



<public:component>
<public:attach event="onpropertychange" onevent="propertyChanged()" />
<script>

var supported = /MSIE (5\.5)|[6789]/.test(navigator.userAgent) && navigator.platform == "Win32";
var realSrc;
var blankSrc = "blank.gif";

if (supported) fixImage();

function propertyChanged() {
if (!supported) return;

var pName = event.propertyName;
if (pName != "src") return;
// if not set to blank
if ( ! new RegExp(blankSrc).test(src))
fixImage();
};

function fixImage() {
// get src
var src = element.src;

// check for real change
if (src == realSrc) {
element.src = blankSrc;
return;
}

if ( ! new RegExp(blankSrc).test(src)) {
// backup old src
realSrc = src;
}

// test for png
if ( /\.png$/.test( realSrc.toLowerCase() ) ) {
// set blank image
element.src = blankSrc;
// set filter
element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" +
src + "',sizingMethod='scale')";
}
else {
// remove filter
element.runtimeStyle.filter = "";
}
}

</script>
</public:component>



Note the highlighted area in that code... This needs to be a direct path to a 1px by 1px completely transparent GIF image on your server.

Copy the above code and paste into new file, then save it as "screw_ie.htc"

You can actually save it as whatever floats your boat, I just really hate IE.

Anyway, once you have that saved... You need to use what's called a "condtional statement" to hide this crap from COMPLIANT browsers. It should go in the <head> of your page between <head> and </head>



<!--[if lte IE 6]>
<style type="text/css">

img {
behavior: url("screw_ie.htc");
}

</style>
<![endif]-->


Upload the blank GIF image and your new .htc file to your sever and voila!

Also, should mention that this still will not fix png 8 images. There are different types of ".png" images, and png 8 is only 8bit and only uses an indexed color pallette much like "GIF", so it does not support any alpha layers.

PNG 24 on the other hand, is actually 32bit color (24 color, 8 alpha) so it can produce alpha transparency.