Website Design TransparencyCSS Transparency

You can set transparency with CSS. In order to handle internet explorer and all the other browsers you have to set it in different ways, it is possible that with internet explorer 9 they will standardize CSS but for now this is how you have to do it. Here is an example of setting transparency to 70%:

ie:                          filter:alpha(opacity=70);

All the others:     opacity: 0.7;

Older Mozilla:     -moz-opacity:0.7;

The thing to know about CSS transparency is that internet explorer does not always do a good job of displaying it so look at it before you publish.

Png and Gif Transparency

Png and Gif are picture files that allow for transparency, gif allows only for 100% transparent, png allow for gradients of transparency. Gif are much smaller than png, so whenever possible use a gif

Unmoving Transparency

If you are dealing with a transparent picture on top of another that never changes then why don’t you just save them together as one picture. This will make the page smaller and easier to load.

At times I use different methods on the same website. For example http://gasmileagesolutions.com is done with png files, you can see when you scroll to the bottom there is an actual different picture behind. Their forum, http://gasmileagesolutions.com/forums, on the other hand needed to be smaller for loading reason, on that portion of the website the background, even if it looks like a transparency, is just one jpg file.