Important!

Update 2014.08.15:

I originally posted this on my personal blog, where my background image was a picture of large (grapefruit-sized) stones just under blue water. You can follow the link to the Wikipedia Commons below to see the original image, but I no longer use that background image on my blog.

On of the main problems with using a full-size background image is that there are so many different monitor sizes available. Someone with a small monitor may not see much, if any, of your background image, while someone with a large monitor may see the background image greatly distorted.

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!)