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.
16 Comments:
Hi there,
I tested this script and it works only partially :( It does render my png background perfectly but then I can't click on the link that's using that image as background.
I hate IE :(
The script works only partially as ikki said. I used this and had other .png files as background images without transparency. Now everything just shows up blank.
This script also attacks my png-8 files which render fine in IE 6 and totally removes them.
This script works great, I don't see what the other guys are talking about BUT, I can't move the position of my background image now... Any solutions?
I`m using hotlinkfile.net hosting for that 2 files, but it does NOT work. May be the script, may be the IE wich suc**
Thank you so much anyway
it worked for me only for backgrounds but not for regular images. I had to make the images backgrounds for this to work.
links are dead!
Hi
I need some help
I already generate .gif image but
the image don't animate yet.
please help me.
Hi....again. i'm yet already have our own logo.
Now i want to make it as .png file...and make it transparen as you show me as example
WORTHLESS SCRIPT
Kills ALL links inside the element that contains the transparent png background...
NOT WORKING!!! script replaces image
nice work
Thanks Dear. We use it
We got Solutions
i have a great information here , posting very informative content is really fantastic here ,i wish to continue to visit daily for this site because so many people interesting in it , by this comments will updated daily having a chance of more and more learn
I would like to see more details about this topic. I'm going to keep coming back here. mujeres rusas
Reverse Cell Phone Lookup | Landscape Lighting | Pellet Stoves | Outdoor Security Lights | Used Pellet Stoves | Lookup a Cell Phone Call | Outdoor Flood Lights | Discount Pellet Stoves
ugg boots sale online Dong Xiaokui dark heart cry: poor ugg sale She is a psychological tactic ugg boots Third ugg boots sale Very unlucky today uggs outlet Dong Xiaokui also mind to use the "Zhaogao world"] in [the East Channel cheap ugg boots Dong Xiaokui ignore uggs boots on sale System immediately scroll Notice: bellona worry dissolution of the marriage of God with Carpenter. uggs boots Condition 3: The best is the main practice medicine or medical care. ugg boots cheap also refused to reply ugg boots on sale but the equipment several times than their own artifacts. Usually
Post a Comment