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
Unzip this file and save the contents to a location on your computer. Then upload both
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.
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.
Credits and Usage Information
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.