Shadows and Patterns

Finally, let's combine the previous two techniques to make something that looks like this.

The first thing we need to do is alter the background image you just created. Before you begin, use File and Save As to change the name of the image to something like bgpattern.png

Use Modify and Canvas Size to change the size of the canvas to be really wide (2100 pixels should do) and set the height to be the exact same as the image you want to use as the background pattern. My pic is 14 pixels:

Use the Rectangle tool to draw a textured image the same size as the canvas:

1. Choose a light pink color
2. Using the Texture editor, select Other, then browse for the pattern you wish to use
3. Set the Width and Height to match the canvas dimensions
4. Set both the X and Y positions to 0 (This will center the image on the canvas)

That's hot! Now the only problem is the background is on top of the white content area. To swap depths, Right Click on the pattern image and chose Arrange, then Send To Back:

Now Export a usable GIF image and turn your attention to Dreamweaver. Bring up the Rule Definition for the body and modify the Background element:

1. Browse for the image you just exported
2. Set Repeat to repeat-y (this will tile the image vertically only)
3. Set the Horizontal position to center

That's all there is to it. Unless a user has a display width greater than 2100 pixels (the size of your background image), your project is going to look exactly like this.

The final definitions for the body tag should look like this in your CSS sheet: