Aligning Background and Wrapper Div

So I somehow always run into this issue when first building websites. I have a background in my main body tag:

body {
background-image: url(images/KS_MainBkgd.jpg);
background-repeat: no-repeat;
background-position: center top;
font:62.5% “Times New Roman”, Times, serif;
line-height:1.7em;
color:#444;
}

Then I have a div wrapper with another background inside:

#wrapper {
background-image: url(images/KS_MainContBkgd.png);
background-repeat: no-repeat;
background-position: 0px 25px;
width: 824px;
height: 1235px;
margin: 240px auto;
padding: 0px 0 0 0;
}

The problem I’m having is that when I add the margin to the wrapper to position it where I want it it’s adding that amount to the bottom of the page and also cutting off the bottom of the background in the div wrapper? Is there a better way to position things?