PNG Image Transparency In WebPages – Download Example

by on February 17th, 2008

This example will show you how to use a transparent PNG image in a webpage. When it comes to slicing and using images in webpage, we have to use some images in gif form sometimes particularly for curves and rounded corners while creating boxes by images for webpage. We use images in background. Give any gif a shadow or glow, export it transparent and use it in webpage and you will see that transparency quality is not so good.

We know that PNG gives us transparent background in sharp quality but when we use this PNG in webpage, it will have a default background in all browsers.

Now we will tweak this a little bit and add a style sheet to that particular transparent PNG image or you can use style sheet to IMG tag which will be applied to all transparent PNG images of website and add a PNG behavior HTC file in the same folder and we are done. Now all the transparent PNG images at website or page will have exact sharp fine quality transparency. I have tested it for IE, Mozilla Firefox, Safari and Opera browsers and it works fine. Download the example below.

Download transparent PNG background example in webpages

P.S. For this script IE version requirements are 6. And I did not try this for background PNG image. For more powerful, compatible and cross browser solution download another flavour of the script.

Download More Powerful Solution For Transparent PNG Issue