Opacity with PNG

cof·fee
Pronunciation: 'ko-fE, 'kä-
a beverage made by percolation, infusion, or decoction from the roasted and ground seeds of a coffee plant

First things first: The greyish box on the left serves two purposes. The first is that it is both a distraction and reminder for you. Fetch yourself some coffee (or other beverage of your choice), come back, sit down, have a sip and read on.

The second purpose is to show off one of the true strengths of the PNG image format.

PNG is truly a wonderful image format. With support for up a color depth of up to 48 bitplanes, true 8-bit alpha channel support, we have proper control over opacity.

Another virtue of PNG is it's ability to carry gamma correction infomation, so your image theoretically may appear the same on different displays.

Finally, it also rids the world of the disliked GIF, employing patent- and royalty-free lossless compression algorithms. It should be ideal for the web, right?

A quick how-to

This is really quite simple. All of the elements on this page that are partly transparent use css that looks something like this:

div.selectorName{
  background-color: transparent;
  background-image: url(white-op60.png);
  background-repeat: repeat;
}

The background-image should be an PNG image with the tint and level of transparency you desire.

This demonstration use a uniform color palette, hence the different background-colors you see are all greyscale images with various levels of transparency.

Not in every browser

If you're not seeing any alpha blending here, it may be because your browser does not have full support for the PNG image format. Unfortunately, Internet Explorer for Windows is one of the browsers with lacking support, as it will not render the alpha channel, but replace it with a solid colour.

Sure, it can be faked through the use of different DirectX filters, like AlphaImageLoader and Alpha, but they are not neccesarily applicable, and if you use them in CSS, they will break the validity of your style sheet.

However, this does not mean that the technique cannot be used. Take a look at this screenshot from Internet Explorer, you will see that the contents of the page still are accessible using MSIE.

Graceful degradation

There is one thing you need to consider before using the technique outlined in this demo: How will it look if the user chooses to turn off images? Most likely, you will find that you need to have sufficient contrast between the background of the page body, and any text you choose to use.

Next: Fixed backgrounds