PNG Fix for Background Transparencies

March 07, 2008

In IE6 and below, semi-transparent PNG images don't generally work well as backgrounds.
Thanks to Alfonso, I've been able to apply background transparencies using PNG images in this design.

How it works

The transparency of the background is rendered against a transparent GIF image. In IE6, GIF transparency is rendered just fine. In effect, we're using a blank image as an additional background to the PNG image.

How to use this in your own blog/web design

This is really easy to implement. Simply download bgsleight.js from NaterKane's site, edit the path to your transparent GIF image, then upload the script to your own host.
Call the javascript in your blog/web template by inserting the code just before the closing head tag, like this:
<script src='' type='text/javascript'></script>

You can then change the background images in your CSS style to your PNG images as appropriate.
Now when you view your site in IE6 and below, the background images should have the transparency you require. It may take a second or so for the script to load, which means in the meantime that your backgrounds may have a grey border. This should disappear in the blink of an eye, leaving your design looking as beautiful as it should!

You Might Also Like


Goodreads Reading Challenge

2019 Reading Challenge

2019 Reading Challenge
Amanda has read 49 books toward her goal of 50 books.