Semi-transparent png fix in IE6 with CSS
This example shows how you can show semi-transparent png images in IE and don't mess up the code in other browsers. It uses only CSS and no JavaScript.I use the attribute style to make a style for other browsers then IE. And I'm using the filter style that works only for IE in the normal section.But first you have to make a semi transparent png image.
Then make an div layer and set a class name "mydiv"
And here is the CSS code:
-
.mydiv{
-
background-repeat: repeat;
-
position: relative;
-
display: block;
-
width:250px;
-
height:200px;
-
text-align: center;
-
/* Mozilla Firefox and other non IE based browsers ignores the filter style*/
-
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( enabled=true, sizingMethod=scale src="back_g.png");
-
}
-
-
/* IE ignores this part IE can not read styles with [attribute]*/
-
.mydiv[class]{
-
background-image: url(back_g.png);
-
}
-
body{
-
background-image: url(BG.png);
-
background-repeat: repeat;
-
}
Since IE can not show semi-transparent png images, we have to use the filter style that only works in ie. But if we use this code we have to make sure that other browsers can show the png file as well. So we use the styles with attributes. And since IE can not read this part, we can put everything that IE dose not need to read there.