Select an image you want to use. Fade the image into a background color with the airbrush. If you want, you can also add the design name and other effects.

Using the select tool, select two areas: one for the content and one for the navigation.

Then, go to Edit>>Fill and fill it with a suitable color and opacity. Select Edit>>Stroke if you wish. The settings are up to you. I used outside, 1px, and 50% opacity. Save your image.

Use the single row marquee tool and select the last pixel of the image for the background. Go to Edit>>Copy. Open a new canvas and select Edit>>Paste. Save the background image.

Part II: Coding

Insert this in the CSS. It could be between the <style> and </style> tags or in your external stylesheet.

body
{
background-image: url(yourbackground.jpg);
background-color: #color;
background-repeat: repeat-y;
}

#image
{
position: absolute;
left: 0px;
top: 0px;
}

#content
{
position: absolute;
left: ###px;
top: ###px;
width: ###px;
}

#navigation
{
position: absolute;
left: ###px;
top: ###px;
width: ###px;
}

Repeat-y repeats the image downward. Position: absolute positions the contents of the div layer a certain number of pixels from the left and top of the window. Width specifies the width of the div.

Insert this in the HTML of your page:

For the image:

<div id="image">
<img src="yourimage.jpg" width="###" height="###">
</div>

For the content and navigation:

<div id="content">
your content
</div>

<div id="navigation">
your links
</div>

Notice that the ids are assigned in the CSS. Change the ### under #content and #navigation until everything is positioned within the content and navigation spaces.

Here is the completed design.

Take note that this is a simple div layers layout. Experiment with different image editing and be creative.