Let me start by saying this isn't a perfect solution. In a perfect world, the most widely used web browser would support much smoother PNG alpha transparency. We could then use PNG graphics and everything would be clean and crisper than print (well... close maybe). However, that isn't the case. There are workarounds to force Internet Explorer/Windows to play nice with PNG transparency, but this is a simple solution that goes light on code with almost no hoops to jump through. There are some limitations that you need to accept and work with which I will address later. For now, let's start at the beginning with the GIF.
Note: What follows regarding the creation of the GIF is borrowed from Jeffery Zeldman's April 2002 Macworld article, so all credit where it is due.
First, create a new image in Phototshop. Set your image size to 4px by 4px, resolution to 72dpi and make sure the 'Transparent' radio button is selected in the Contents area.
Next, zoom to 1600% and select the pencil tool. Set your brush size to 1px and simply click once to fill every other pixel area. Select define pattern from the the edit menu and name your pattern.
Because subtlety is the key with this technique, it's often a good idea to make a few color variations. I usually try to include the hex numbers in the name of the pattern so I can keep track of which color works the best for the particular project.
Now create another new image in Photoshop. This time set your image size to 40px by 40px, and again resolution to 72dpi with 'Transparent' contents. Select fill from the edit menu and 'Pattern' from the drop down list. Select the pattern you just made and click OK. This will be your actual background image.
Select the save for web option in the file menu and save your image as a 2 color transparent gif with no matte. I usually try to include the hex number (as mentioned above) in the file name as well.
Now that you have your transparent background image how does it go together? Check out this sample and view source to see just how simple it is.
And those are the basics. Next time we'll get further into building a page as well as some different approaches to creating the background image. Including how to incorporate more than one color and ultra hip drop shadows and rounded corners. Next Wednesday "Variations".