How do I add background border images around main content?

[kahmeal]

First off, this is for a LIQUID (90%) layout, fixed is not an option.

My forum currently looks like this:
http://www.booost.com/dev/without_bg.jpg

What do I need to edit to get borders like this?
http://www.booost.com/dev/with_bg.jpg

I've tried doing this the old-school way using tables in the header/footer to create columns around the entire forum but its not working at all. http://www.supramania.com/ has this style but I can't seem to get it to work using their source code. Any ideas?

I've gotten this to work using the method supramania.com has by studying their code but there is a bug when the page does not span the full height of the browser window like so: http://www.booost.com/dev/bg_bug.jpg

Here is the code I used to achieve the effect (which works fine if the page spans 100% of the height):

Style Manager > Common Templates > Header

<div id="content1">
<div id="content2">
<!-- content table -->
$spacer_open

$_phpinclude_output

Style Manager > Common Templates > Footer

<br />
<div class="smallfont" align="center">$vbphrase[all_times_are_gmt_x_time_now_is_y]</div>
<br />

....

</div>
</div>

Style Manager > Main CSS > Body

margin: 0px;
padding: 0px;
background:transparent;
background-image:url(http://www.booost.com/forums/images/page_bgright.gif);
background-position:right;
background-repeat:repeat-y;
min-height:100%;

Style Manager > Main CSS > Additional CSS Definitions

/* ***** styling for 'big' usernames on postbit etc. ***** */
.bigusername { font-size: 14pt; }

/* ***** small padding on 'thead' elements ***** */
td.thead, div.thead { padding: 2px; }

/* ***** basic styles for multi-page nav elements */
.pagenav a { text-decoration: none; }
.pagenav td { padding: 2px 4px 2px 4px; }

/* ***** define margin and font-size for elements inside panels ***** */
.fieldset { margin-bottom: 6px; }
.fieldset, .fieldset td, .fieldset p, .fieldset li { font-size: 11px; }

/* ***** don't change the following ***** */
form { display: inline; }
label { cursor: default; }
.normal { font-weight: normal; }
.inlineimg { vertical-align: middle; }

html {
 margin:0;
 padding:0;
 background-color:#899198;
 background-image:url(images/page_bgleft.gif);
 background-position:left;
 background-repeat:repeat-y;
 color:black;
}

div#content1 {
 margin-left:35px;
 margin-right:35px;
 border:0px;
 background-color:#899198;
 color:black;
}
div#content2 {
 padding-left:0px;
 padding-right:0px;

I guess the main question is, how do I make the main "page" portion of my forums always stretch to 100% of the height of the browser window?