If you really want your mainWrapper a fixed height, you can make #contentMainWrapper fixed height too, which will push the footer down.
As you have the background, a page with small contents will have a large gap at the bottom, and a page with larger contents will overflow. I don't see any design purpose to having the page border fixed at the current height; you would make the rest of your development much easier if you work out a fluid height border.
The background is "staying in place", but this is not good for you. If what you mean is for it to stay surrounding the content, we are on the same page (as it were;).
Google "sliding door method" for an explanation of expanding containers.
Briefly, I think what would work for you is to have the side border as an image 970px wide x 20-30px or so high (exact number of repeats of scallop) and set for repeat-y so it fills whatever the height is. Remove the fixed #mainWrapper height, and any padding.
Then put the top of your border as background in #headerWrapper, no-repeat, background-position: top;, and no top or side margins.
The bottom border can go in #siteInfoLegal, similarly arranged. Give #siteInfoLegal a height big enough so the border can sit below the text.
Finally, as I was scrolling through your stylesheet, I noticed a raft of things that were unnecessary, wrongly written, or are likely to cause difficulties down the road. Once you have made a start on your border, I can help you go through those if you want.