I would like a background like the one you see here:

http://glenwoodcitywi.com/index.php?...or-information

do I need two separate images? if so, how do I get them to lock to the sides of the content when someone resizes the browser?

Here is the image they are using for that background: http://glenwoodcitywi.com/uploads/andreas01/bg.gif

This image could be placed onto the background of the body(for example) like this:

body {
background: url(../images/bg.gif) center top repeat-y #1c2e72; 
}

Note that that color used for the background color matches the last color in the gradient, so that if the page is viewed with an very wide monitor, the page will still be filled with color. The background is centered, and repeats along the y-axis only, lending to the illusion that it is a part of the page.

This could also be expressed like this:

body {
background-image: url(../images/bg.gif);
background-position: center top;
background-repeat: repeat-y;
background-color: #1c2e72; 
}

I prefer the shorthand method in most cases.

Thanks, that will work great!