Here's my full CSS:
html,body{margin:0;padding:0}
body{background: #000 url('../images/bg-overall.jpg'); background-position: center top; background-repeat: no-repeat;font: 76% arial,sans-serif;text-align:center;}
p{margin:0 10px 0; text-align:justify;}
a{padding:5px; text-decoration:none; color:#000000;}
div#login{background-image: url('../images/bg-login.png'); height:33px; line-height: 33px;color:#fcd551;font-weight:bold; text-indent: 20px;}
div#header{background-image: url('../images/bg-header.png'); height: 134px;}
div#date{background-image: url('../images/bg-date.png'); height: 32px; line-height: 32px; text-indent: 40px; color:#dcb002;}
div#container{text-align:left;}
div#continue {background-image: url('../images/bg-center.png');background-repeat: repeat-y;}
div#content p{line-height:1.4}
div#navigation{background:#F6F0E0;}
div#navigation ul{margin-top: 3px; margin-bottom: 0; padding:0; list-style-type:none;}
div#navigation li{background:#d5c29a;margin-bottom:0px;border-top: 1px solid #a07c3c; margin-left: 16px;margin-right: 15px;height:20px;line-height:20px;text-indent:20px;}
div#footer{background:#BFBD93;}
div#footer p{margin-left:auto;margin-right:auto;text-align:center;}
div#container{width:978px;margin:0 auto}
div#content{float:right;width:718px}
div#content h1 {font-size:15pt; margin:0 10px 0;line-height:30px; font-weight:normal;}
div#contenttop {background-image: url('../images/content-top.png');width:664px;height:6px;margin-left:20px;margin-top:20px;}
div#contentbg {background-image: url('../images/content-bg.png');width:664px;margin-left:20px;border-bottom: 1px solid #39382f;}
div#contentbottom {width:664px;margin-left:20px;height:4px;margin-bottom:10px;}
div#contenttitle {background-image: url('../images/content-title.png');height:29px;width:637px;margin-left:auto;margin-right:auto;line-height:29px;text-indent:10px;}
div#news {background:#d5c29a; width:637px;margin-left:auto;margin-right:auto;margin-top:7px;margin-bottom:20px;}
div#navigation{float:left;width:229px; margin-left:15px; margin-right:15px;margin-top: 20px;}
div#navlefttop {background-image: url('../images/nav-left-top.png');width:229px;height:5px;}
div#navleftbg {background-image: url('../images/nav-left-bg.png'); background-repeat:repeat-y;}
div#navleftbottom {background-image: url('../images/nav-left-bottom.png');width:229px;height:5px;}
div#navlefttitle {background-image: url('../images/nav-left-title.png');height:23px;width:198px;margin-left:auto;margin-right:auto;line-height:23px;text-indent:10px;}
div#footer{float:left;clear:both;width:100%;height:171px;background-image: url('../images/footer-bg.png');color:#d3b276;line-height:171px;}
div#page{background: #000 url('../images/bg-center.png'); background-repeat: repeat-y; height:100%;}


As you can see the body has a background, this runs behind everything else and is full width. I then have content over the top of this.

Here's an image what it looks like and what I'm trying to do.

http://i48.tinypic.com/29mq2ag.png

Adding the background to html does the bg-center fine, but the bg-overall is cut off after the content top

html{margin:0;padding:0;background: #000 url('../images/bg-center.png'); background-position: center; background-repeat: repeat-y;}

Still trying to find a work around to this, if you have any ideas, fire away.

As you can see the body has a background, this runs behind everything else and is full width.
Adding the background to html does the bg-center fine, but the bg-overall is cut off after the content top
Still trying to find a work around to this, if you have any ideas, fire away. Can we have a link to your page?

Yeah I've just uploaded it.

http://hevvo.com/rh/

Does anyone have any ideas how I can work around this?

If a container has some inner elements floated, it will not extend its height upon the highest of those elements. This is a layout problem which can be solved in many ways. The classical way is to create an empty div, at the bottom, which should clear the float.

<div id="container">
<div style="float:left">some content</div>
<div style="float:right">some content</div>
<div style="clear:both"></div>
</div>

Okay, then how can I get the bg-center.png to work?

Still need help with this. :(

I have nothing more to say. It seems like you didn't understand what I have shown you, but I can not do more than that. It is a basic and simple CSS issue there.

Apparently not, as I am unable to figure it out. I've tried what you said, and it didn't work. If it was a simple CSS issue I'd be able to fix it. However, I cannot.