geeky

transparent PNG background

I’m happy I learned something cool and new today. So I’m gonna share it with you 🙂

You may know that the filter “alpha(opacity=100);” in IE changes the intensity of an object. What you might not know is the PNG image has the ability to change its own opacity as well. To learn how to make such a PNG image with photoshop 7, click here. I wrote a tutorial at dnw that teaches you how to apply such an image as a background of a table. So effect like this can be reached on not just IE but ALL BROWSERS!

WARNING: Please note IE link bug comes with this trick. You may want to find alternative ways here if you want to have links in your table cell! Btw, I also demonstrated a solution I used at my dnw tutorial.

Why is this better than the filter?
In addition to the fact that all browsers support this trick, it changes only the opacity of the background. IE filter would change the opacity of everything that is in a table cell which gives you less control.

What’s tricky about it?
Everything will be cool if IE correctly supports partly transparent PNG. It does not so we must find ways around it. Regularimg src or background does not show the transparency of PNG file correctly. IE uses a AlphaImageLoader filter. It’s a dumb solution and in fact there’s a petition for proper PNG support in IE for Windows. As long as IE developers don’t plan to make improvement, we will have to rely on this trick to make partly transparent PNG correctly show in IE.

What is the trick?
This trick is written by Erik Arvidsson. There are also different tricks but I find this easiest to install. He modifed the css behavior of img to allow IE to use its AlphaImageLoader filter to load all PNG files while other browsers maintain the original code. His code works only withimg tag. alt=” “ I modified his .htc file to allow the same replacement in the background tag.

Click here to learn how to use this trick to apply semi transparent background to ALL BROWSERS!

4 thoughts on “transparent PNG background

  1. nifty dodo 🙂

    but in your tutorial i’m seeing (in firefox at least) stroked text from “What’s tricky about it?” to the text before “The IE link bug killed the idea”
    =)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s