An interesting and sought after effect is the opacity or transparancy of an area. That is making the background of an area slightly see-through so you can kinda see the background behind it.

The first step is to create (or obtain) a PNG image that has about a 50% opacity value. If you are too lazy or really bad at using an image program, you can download this one... 50percent.png. Just do a File > Save As to collect the image from the new window that appears.

I used Photoshop5.5 to create the image. If you want a go at making it yourself, this is how I did it :

• Start with a new image, 1x1 in size, with a transparent background.
• Use the magnify command to get a good look at the image since it is rather small.
• Click on the paint command, make the color white as the foreground color, adjust the paint settings to 50% opacity, and color the image.
• File > Save for web.
• Choose the 4 UP tab to see all of the options.
• Change the settings value to PNG24 and check on for transparancy.
• Click OK.
• Enter "50percent" as the file name and you are done.

Now some of you already know that the IE browser cannot process the alpha channel or transparancy of PNG files. Don't worry, there is a coding to fix that.

The next step is to create a test page with an utterly annoying background image.




Next step, applying the DIVs...