Fixing PNG Image Transparency in IE6 (Including Background Images)

If you would like to use any transparency for images in your blog, you should be aware that Internet Explorer 6 (and below) does not render PNG transparencies. So if you use a PNG image with semi or full transparency, you would probably see this rendered against a white/grey background when viewed in IE6 (whereas Firefox and other browsers are able to render the transparency just fine).

One solution to this problem is to use GIF images instead, but this does lead to some compromises in design as the GIF format cannot render semi-transparency (where some of the background color is visible through the image).

Recently, Smashing Magazine posted a wonderful article discussing the use of transparency in modern web design. Many solutions for PNG transparency were referenced in this article, but there was one incredible fix which the author missed out: NaterKane's BgSleight script.

Unlike the PNGfix script (which many of us have used to render transparency for foreground images), this script can also display PNG transparency for background images too! It uses a transparent GIF image as a background to the PNG transparency, and although the effect does not render until the page has fully loaded, I'm sure you'll agree this is the best solution so far when using transparency in PNG images for your blog template design.

How to use the Bgsleight PNG Transparency Fix

I've modified NaterKane's original files to make them easier to download and use by bundling the bgsleight JavaScript file and the blank.gif file in a single download, which you can grab below:

Download bgsleight files for PNG transparency fix

Unzip this file and save the contents to a location on your computer. Then upload both bgsleight.js and blank.gif to the same folder location in your hosting account.

You can find a list of free hosting providers here if you do not already have a hosting account for your scripts.

Finally, link to the bgsleight javascript file in the head section of your blog template, like this:

<script src="http://yourhost.com/bgsleight.js" type="text/javascript"></script>

Don't forget to replace yourhost.com with the URL where you have hosted your bgsleight file!

Now when you upload any PNG image with transparency (full or semi-transparency) to your blog template, the page will be rendered correctly for IE6. As I mentioned before, the transparency will not take effect until the rest of the page has loaded, so for a second or so you may still see a border or pale background around your transparent PNG elements. Once the page has loaded, all of your images will appear just as they should, enabling you to create some great effects in your template design.

You may also want to check out Fonsite and Flair in the City to see how this script has been used in other Blogger powered blogs.

Credits and Usage Information

The bgsleight script was originally developed by NaterKane and is distributed under the Creative Commons 2.5 License.

Thank you also to Alfonso of Fonsite for telling me about this highly useful script!

If you have enjoyed this post, please consider subscribing to Blogger Buster for updates of future articles.