23 Fixing PNG Image Transparency in IE6 (Including Background Images)
April 18, 2008 /

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.

Author: Amanda Kennedy

Amanda is a professional blogger and web designer living in Sheffield, United Kingdom.

In addition to curating Blogger Buster, you can find Amanda on Twitter, Facebook or add her to your circle on Google+.

Like to share?

You may also like to subscribe to Blogger Buster's RSS feed or receive free email updates of our latest posts.

23 comments:

  1. 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 :(

    ReplyDelete
  2. 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.

    ReplyDelete
  3. This script also attacks my png-8 files which render fine in IE 6 and totally removes them.

    ReplyDelete
  4. 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?

    ReplyDelete
  5. 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

    ReplyDelete
  6. it worked for me only for backgrounds but not for regular images. I had to make the images backgrounds for this to work.

    ReplyDelete
  7. Hi
    I need some help
    I already generate .gif image but
    the image don't animate yet.
    please help me.

    ReplyDelete
  8. 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

    ReplyDelete
  9. WORTHLESS SCRIPT

    Kills ALL links inside the element that contains the transparent png background...

    ReplyDelete
  10. NOT WORKING!!! script replaces image

    ReplyDelete
  11. nice work

    Thanks Dear. We use it
    We got Solutions

    ReplyDelete
  12. 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

    ReplyDelete
  13. I would like to see more details about this topic. I'm going to keep coming back here. mujeres rusas

    ReplyDelete
  14. 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

    ReplyDelete
  15. Thanks to share with us the information. I wish you good luck!

    ReplyDelete
  16. Thank you is interes for my site

    ReplyDelete
  17. The most significant issues which everyone face will be justifying what exactly one particular wish to accomplish along with precisely why it will break up the reputation quo -- whether it be to provide judgment or perhaps starting up any converstaion. It facilitates while looking at the materials was adament within the make any difference you've pointed out. Great tunning the concept people mentioned will certainly take brand-new possibilities of this type connected with attention in addition to gives will certainly result a thing good. I enjoy your efforts associated with getting discover involving above mentioned make any difference.

    ReplyDelete
  18. Glad to read your post. The topic that you discussed above is truely very useful. It is really help for anyone to workout. I like it and i will recommend it to others. Thanks for sharing this type of information. Good luck for the future posts.
    bane coat

    ReplyDelete

Great! You've decided to leave a comment! Please bear in mind that comments are often moderated and that rel="nofollow" is in use and spammy comments will be deleted. Let's have a meaningful conversation instead. Thanks for stopping by!

Advertise on Blogger Buster

Browse through the Archives

All existing posts are still available to view while I'm working on the site, albeit seen in a much simpler interface. Feel free to browse through the archives to find tutorials, templates and articles to help you build a better blog:

Blog Archive

© Blogger Buster 2010 Home | About | Contact | Hire Me | Privacy Policy