Part I: ImageSelect 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 100% 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: CodingInsert 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.
Take note that this is a simple div layers layout. Experiment with different image editing and be creative.
