After IE 7 came out with 24 bit PNG support, I really wanted to figure out how to use PNGs better in my designs. However, the 50-60% of people still using IE 6 just didn’t seem to justify going in new directions with PNGs. I knew you could make PNGs work in IE 6, but I always thought it was difficult and buggy. Well, as I found out, its not as hard as I thought. This tutorial will show you just how easy it is and how you can do things with your designs that are impossible without PNGs. I assume you have a pretty good knowledge of css, and will be able to use the source code of the examples as a tutorial.

I’ll start off with the examples. Click here to see the most awesome use of PNGs for backgrounds ever. Don’t blame me if your eyes pop right out your head

As you can see from the examples the big deal with using PNGs is that you can mix two or more background ‘effects’. All of the examples utilize a gradient fade in a background div, along with a gradient fade around the square that represents where the page content would go. Examples 2 and 3 throw a pattern on the body background and mix all three images seamlessly. As far as I know, there is no other way to do this with centered page content, a fade around the content, and a pattern in the background that is not horizontal stripes.

So how is it done??

Read on to find out…