Transparent Image technique for Internet Explorer
On image with png (and gif?) extension, we can create transparent image.
So you can create logo with transparent background and put this logo image on background image.
But this technique can not work corectly on Internet Explorer.
How to make it work?
This article explain how to create transparent logo image can work on Internet Explorer.
Step 1: Please create png logo image with transparent background (you can use PhotoShop for this case)
Step 2: Use any image for background image.
Step 3: Create style.css
div#logo {
height: 39px;
width: 304px;
background: url(../images/logo.png) no-repeat !important;
background: transparent;
}
Step 4: Create style_ie.css for IE specific.
div#logo {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./themes/mytheme/images/logo.png',sizingMethod='scale');
}
Step 5: Create HTML 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>Transparent Image demo</title>
<link xhref="./themes/mytheme/style/style.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 6]>
<link xhref="./themes/mytheme/style/style_ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
<body>
<div id="header">
<div id="logo"></div>
</div>
</body>
</html>
Now you can try it.
