Make IE show transparent image correctly

Under Category: CSS Design  

I got a IE display problem when I add my logo for programcreek. The logo is a transparent image. It shows well on firefox, Chrome, like the following

but got the following problem in IE. The transparent background is now a black background.

Here is the solution.

Before

<img src="./images/logo.png" border="0" alt="ProgramCreek.com" height="47px" />

After

<span  style="height:47px; width: 200px; margin-top: -11px; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0); 
						filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./images/logo.png'); 
						display: inline-block;">
      	 	<img alt="ProgramCreek.com" style="filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);"  src="./images/logo.png" height="47px" border="0"/>
      	 </span>

Here add a tag for adding style.

Here the initial logo image is very large, IE can not resize the image. So I resize the image by using this tool. It’s very good.

You may also like:

Leave a comment