Using png-files is common when you want transparent images on a webpage. The only problem is that the png-images are not transparent in IE6 (Internet explorer 6). Instead you will find that the background is white (at least for me).
There is a solution to this involving some css-coding that a colleague of mine found on the Internet. What you do is that you add two css-classes to your stylesheet style.css.
.image_area {
background-repeat:no-repeat;
color:#FFFFFF;
float:left;
text-align:left;
width:300px;
height:200px;
padding:0;
margin:0;
background-color:transparent;
/* Mozilla ignores crazy MS image filters, so it will skip the following */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=image, src='images/anImage.png');
}
.image_area[class] {
background-image:url(images/anImage.png);
} |
Width and height above are the same as the width and height of the image. And the name of the image is 'anImage.png' in the directory 'images'.
Then use the css-classes in a html-file like below and you have got a non-transparent png-image in IE6 and of course in all the other browsers as well. The div will have a background image that is transparent. This means that you can add another image in the div, set a background color for the div or for the body as you like.
<html>
<head>
<link rel='stylesheet' type='text/css' href='style.css' />
</head>
<body>
<div class="image_area"></div>
</body>
</html> |
not understandable