Creating a translucent background effect using a PNG image

A lot of people have asked me how I created the translucent background effect on my personal blog. So here is the trick.

Open Microsoft Photo Editor that comes along with Microsoft Office versions prior to MS Office 2003. If you are using MS Office 2003 or don't use MS Office at all then download MS Photo Editor from here.
Select File > New then select Width as 1 Cm and Height as 1 Cm and click OK.
Set the color of the background as per your desire/design.
From the toolbar select and click anywhere on the image.
In the Change Color to Transparent dialog box set Transparency to 20%. If you need more transparency, increase this value. If you select 100%, the image will become completely transparent. If you need a more opaque background, set a value lesser than 20%. Selecting 0% will keep the image as is.
Now click Image > Resize and select Pixels as Units and Width as 1 and Height as 1. Click OK
Click File > Save. Select the folder where you want to save the file and give the file a name, I gave it "translucent" and select Portable Network Graphics (*.png) under Save as type. Click Save. Close Microsoft Photo Editor.
Now upload the image to your web server or where ever you host your graphics files.

Now we need to edit the html of your web page(s). Set the background image of the page either using CSS (as below) or directly inserting the style element within the body tag. Now enclose the content that you want with a translucent background within div tags and set the background image of this div tag to the graphic image that we created using Microsoft Photo Editor. Again, you can either use CSS (as below) or insert the style element directly into the div tag.

<html>
  <head>
    <style type='text/css'>
      body {
        background: url("http://www.yourdomain.com/pathtothebackgroundfile/background.jpg") top center no-repeat fixed;
      }
      #outer-frame {
        background: url("http://www.yourdomain.com/pathtothegraphicfile/translucent.png");
      }
    </style>
  </head>
  <body>
    <div id="outer-frame">
      Your content goes here
    </div>
  </body>
</html>