Transparent backgrounds and IE AlphaImageLoader

by Ove Andersen Published: 6/26/2009 3:27:42 PM

A good approach when making a transparent background using css is to repeat a 1x1 pixel gif or png image like this:

#content {
    background: url('/path/to/transparent/image') repeat;
}

However, IE (version 6 through 8) has problems displaying this correctly when using the DXImageTransform.Microsoft.AlphaImageLoader filter on the same page as the transparent background.

Example:

The AlphaImageLoader filter is among other things, used in Internet Explorer when you use the following functions in jQuery:

fadeIn()
fadeOut()
fadeTo()
toggle()
show()
animate()

The solution to this bug is really simple. Just use a 2x2 pixel (or larger) image instead.

The result is this: