There are lots of “fixes” for transparent png images in Internet Explorer which remove the “white block” bug in lower versions of Internet Explorer however some dont work as well as others.

Flaws:

Some flaws I have found with some methods:

• You cant repeat the image on the background
• You cant have links within the text as they become un-clickable

Solution:

I recently came across what seems like a very good solution and a big advantage of this is that its not difficult to add into your pages therefore you have the choice of making a style-sheet for Internet Explorer or applying the PNG for IE fix to all browsers.

Method:

• Put your image in a div and apply a class to it
• In the style-sheet add the following code and change where appropriate:
  • _background-image: none; 
  • filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( enabled=’true’, sizingMethod=’scale’, src=’image.png’);

This will give you the solution that your looking for, this method also allows the image you are using to be repeated so you can repeat a transparent background image.

The one down side of this method is that you can now no longer click links on top of your background, however there is a solution to this problem and that is to create another div inside the the background div which just has the property of: position: relative;.

Summary:

Your code should look something like this when your finished:

Code:

<div class=”backgroundimage”>

<div class=”textlayer”>Text goes in here</div>

</div>

CSS:

.backgroundimage {

background: url(image.png) repeat-y;

_background-image: none;

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=’true’, sizingMethod=’scale’, src=’image.png’);}

.textlayer{

position: relative;

}

I hope you find this useful, any problems add a comment and ill do my best to help you.