Suppose I want a page like this. The background image is in the upper right. It fades away to the left.

Let’s see how I created the effect. I started with a larger version of this photo I took at a local park:

Figure 1. Scenery

I used Gimp to add a transparency mask, a black-and-white overlay that tells Gimp what part of the image shows through. You can see how it works:

Figure 2. Transparency mask

You can see the mask to the right of the photo. Imagine that it’s dropped on top of the photo. White areas in the mask let the photo show. Black areas block the photo from showing. When the photo is blocked, the background underneath shows. It’s a simple white background in this case, but it could be another color, a texture, a different photo, ... whatever your imagination can conjure.

The mask uses a gradient, that is, the mask’s color gradually changes from white to black. When there are gray pixels in the mask, Gimp combines the color from the photo with the background layer’s color. The more white there is, the more of the photo’s color is used.

Here’s a small version of the result:

Figure 3. Background image

Now I have an image I can use as a background for a page.

You don’t have to know how to do photo work like this yourself, if you have someone to do it for you. But it helps to know in general terms how graphics people do their work. Using transparency masks is a common technique.