If you look at this blog, you’ll notice that the main background is a picture of stones under blue water, but that the background of the central content area has a white overcast to it. It sets off the content without being too distracting, because it’s the same picture.

First, I downloaded the picture from the Wikipedia Commons, saving it as “Stones-in-water.jpg”. I set it as my main background in my theme options.

Next, I needed to create the slightly faded out version for the “content” portion of my blog. I made a copy of the original file, naming it “Stones-in-water-50tran.jpg”.

I then opened it up in my image editor. You can use Photoshop if you have it, or you can download GIMP for free. It is similar enough to Photoshop that I don’t need to offer separate instructions here:

1. In the layer palette, I added another layer (which automatically goes on top of the background layer).
2. I swapped the foreground and background colors so that white was selected.
3. Using the paint bucket, I filled the new layer with white color.
4. In the layer palette, I first verified that I was working with the new layer, and then I changed the layer opacity to 50%. This is the key step.
5. In the layer menu, I flattened the image. I then saved it.

After that, I uploaded it to the media library of my blog, and copied the image address. I then set it as the background of my “content” portion using the following bit of custom CSS:

#content{
    background-image:url('http://blog.kjodle.net/wp-content/uploads/2011/08/Stones-in-water-50tran.jpg');
    background-attachment: fixed;
}

Mischief managed!

This won’t stay this way forever, of course, but for a while I just needed things to be peaceful. And yes, I know that the header image doesn’t really match the rest of it. I gotta think about that for a while.

You can see another site that uses this approach here, while it lasts. (And yay! It’s a cooking blog!)