How to Use PNGs to Make Awesome Backgrounds
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…
Subscribe with RSSCategory: Design | 6,688 views | Posted: November 5th 2007 07:00 am
Comment by Zaigham
on 08 Nov 2007 at 9:00 am #
Its a nice article, however that alphaLoader stuff does not support tiling of the PNG images.
… and I don’t see the examples working right in IE6.
Comment by James Ehly
on 08 Nov 2007 at 9:53 am #
Zaigham - Thanks for the comment. That’s right, AlphaImageLoader doesn’t support tiling. It just doesn’t work that way (it’s lame). Sorry it doesn’t work in your IE6, it works in all the ones I tested. I hate IE 6…
Comment by Greg
on 02 Dec 2007 at 7:57 pm #
Great article. And regarding IE6. Who cares? I stopped debugging for it a while ago
Comment by Indy
on 03 Dec 2007 at 12:58 am #
Now that was cool. Nice job.
Comment by bender
on 03 Dec 2007 at 10:02 pm #
PNG’s are ok for backgrounds, but photos are better.
Comment by rene
on 25 Aug 2008 at 3:14 am #
Check out my photo-backgrounds-CMS: http://mediabeez.ws
And thanks for this article; the clicks-not-working-bug had me worried for about a day until i found this article..