Get updates by email

Submit your Email

Friday, 7 March 2008

PNG Fix for Background Transparencies

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!

Amanda Kennedy / Author & Editor

Amanda Kennedy is a writer and content creator whose websites chronicle many interest areas. She is a lifelong learner who lives in the UK with her family.


Post a Comment

Copright Amanda Kennedy 2019, Design by Amanda Kennedy Templateism | Templatelib | Edited by Amanda