Creating an Elegant Vertical Background

In this tutorial you will learn how to create a background image that can be repeated vertically rather than across.  These types of backgrounds are common if you are using a fixed-width web site that you wish to fill the full vertical height of a viewer’s screen resolution.  See my tutorial about CSS background height to learn how to do this.

	First you want to open Photoshop and create a new file using the settings to the left. I have chosen a 780px wide setting because there are still come computers out there running 800×600 screen resolution, so the 780px image will allow me to contain the effects we will apply later and still have room for the scroll bar on the side of most browsers without having to use the side-scroll bar at the bottom of the screen.
	Now you want to fill your image with the background color you will be using on your web site. You will want to be sure to use a contrasting color from what your text area will be. For instance, if your text area will be filled with a dark color, you may want to choose a light background as to draw the eyes of your viewers to the content of your site. For this example I have filled the background using a shade of blue #416393. You can fill the whole background by selecting Edit -> Fill (or Shift+F5).
	Next you want to determine how wide your content area is going to be. You will want to make sure that there is enough room on the sides to add some effects later on that will help draw eyes to the content. You will also want to make sure that your image is centered. Here is how I did it: I wanted a 720px wide content area, so subtract 720 from 780 to get 60px. You will need a total of 60px around your graphic, and since there are two sides you divide 60 by 2 to get 30. So add 30px to the left side of your graphic and subtract 30px from your right side. Create new guides at these intervals (View -> New Guide -> Vertical Guide – 30px(and another at 750px)).Create a new layer (Shift+Ctrl+N) and name it Content. Use the Rectangular Marquee Tool (M) to create a box inside your guides, making sure to also fill the height of your graphic. It should look like the image to the left. Once you have that, go to Edit -> Fill (Shift+F5) and fill the box with White (select from the drop-down menu). This is where your site content will be. Again, you can choose whatever colors you wish. Black text against a white background is the easiest to read so that is what I will be using.
	Now we will add some effects to our Content layer to make it pop out a little more. Double click the Content layer to open the Blending Effects panel. Select Drop Shadow from the left side and apply the settings I have on mine.The idea is to create a shadow that seems to continue past your graphic’s edges so you can seamlessly stack your graphic on top of itself and create a flawless vertical image that appears to adjust itself to the settings of any screen resolution.
	There, you are finished. Your image should look something like mine to the left (unless you used different colors for your background and content area). Now you can import the image to Dreamweaver and use CSS to create a continuous vertical background for your fixed-width web sites.