The University of Texas at Austin- What Starts Here Changes the World
Services Navigation

Web Graphics

File Formats : The Variable Transparency PNG

There is increasing browser support of a third graphic file format, the PNG file. PNG is the native file format for Macromedia Fireworks and is good to use particularly if you use Dreamweaver and other Macromedia Web Design products. You can also create PNG files in Adobe Photoshop. PNGs with no transparency display beautifully on modern browsers. A huge improvement over the GIF is in transparency. The variable transparency allows antialiasing and soft drop shadows and all the wonderful things you can do with variable transparency over any kind of background, solid, gradiated, photos, patterned etc. The transparency property in this file format displays properly in most browsers with one big exception: IE.5.5+ and .6 on the PC. If you want to try this type of image, there is a style to include in your css that points to an external script file to make .pngs display transparency correctly in IE on the pc.. Until IE5.5+ and IE.6 for the pc upgrades, this is one working solution we came across.

To make .pngs visible on IE.5.5+ and IE.6

First of all, you can either put this code in the <head> inside a <style> tag, or better... link to a style sheet (CSS) in your html. If you're not doing this, you can find more information about learning CSS in learn/CSS. Using CSS for your font styles and positioning in your HTML document is the best way to control how your site looks. Once you get a handle on CSS, it is a major time saver, allowing you to change all the documents in your site just by changing your CSS.

By using this in your css code, all of your images in the site will use this function. You don't have to add any ID's or Classes to the html code around the image for this to work.

The image behavior is dictated by the pngbehavior.htc document.

To get a copy of the pngbehavior.htc, written by Eric Arvidsson of WebFX and more instructions for use please visit http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html.
Copy all of the behavior code with markups and save it as pngbehavior.htc.
They provide it free for non-commercial web sites, personal sites and non-profits. This file uses Microsoft's AlphaImageLoader function and a blank GIF to force the display to show transparency.

Once you have the pngbehavior.htc file, you need to create a blank.gif to put in the same directory as the pngbehavior.htc file. It can be very small, 1 pixel each dimension is enough. If you want the blank.gif somewhere else, (like in your image directory) you'll have to change the path in the pngbehavior.htc.

For all this to work, either put this in the head of your html or php:
<style type="text/css">
    img {
    behavior: url("pngbehavior.htc");
    }

</style>

Or.. better, put this in your CSS:

    img {
    behavior: url("pngbehavior.htc");
    }

Next, put the pngbehavior.htc and blank.gif in the same directory as the html or css.

Be sure and test this on many browsers, most importantly IE 5.5 and 6 on the pc. If it doesn't work, make sure your paths are all correct, you've saved the proper code in a file called "pngbehavior.htc", and empty the cache on your browser. Also use shift-refresh on your browser.

 

 


  Updated 2006 August 14
  Teamweb at UT Austin
  Comments to www@www.utexas.edu