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.
Call the javascript in your blog/web template by inserting the code just before the closing head tag, like this:
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!
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='http://yourhost.com/scripts/bgsleight.js' 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!
Comments
Post a Comment