Background Shade Effect on Pages

Many of the sites you see nowadays that are center aligned, have a nice little shade effect between the over all background color and the background color for the content. You can see what I mean in the screen shot. This effect is very simple to accomplish.
In photoshop, create an image 1 pixel in height and variable width depending on how wide you want the content section. In this example my overall width is 936 pixels - 36 pixels either using a gradient between 2 shades of dark green. Once you set this as a background in a div, set to repeat-y and it will repeat as your page grows. I have included the bg image at the bottom of this post.(update - getting repeated errors trying to upload, so ping me if you need a copy)

Here is the css

#topbar {
line-height:15px;
background:#416845;
width:100%;
}

#background {
width: 936px;
margin: auto;
background-image: url(../images/background2.jpg);
background-repeat: repeat-y;
}

#container {
width: 864px;
margin: auto;
background-color: #eae5c5;
}

Here is the html
<div id="topbar"><br /><br /></div>
<div id="background">
<div id="container">
<!-- Content -->
</div>
</div>