Container DIV background image not expanding with content - css

Question

I am having trouble with my container div, which you will see below. It contains a very simple graphic that repeats vertically. I want the background image to expand with the content, however it is not doing so. When I expand my browser window, the background image expands to fill the page vertically, as it should...but when I scroll, the lower portion of the background that was initially below the fold, is empty when I scroll down.
I've also included the html,body as I am not sure where the problem is.
CLICK HERE TO SEE THE PAGE I AM HAVING TROUBLE WITH
Thank you!!!
html,body {
background-color: #999;
background-image: url(../images/bg.jpg);
background-position: top;
background-repeat: repeat;
color: #fff;
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
height: 100%;
line-height: 18px;
margin: 0;
padding: 0;
}
#container {
background-color: #000;
background-image: url(../images/bg_container.gif);
background-position: left top;
background-repeat: repeat-y;
display: block;
height: 100%;
margin: 0 auto;
max-width: 1200px;
min-width: 860px;
padding: 0 3px 0 3px;
position: relative;
}

Answer 1

The problem here is you are using position:absolute on the div id="triathlete" then your main container doesn't take in care the space of that element. The solution you can try is this:
In your html change the order between two elements, you have:
<div id="triathlete"></div>
<div id="mainBody"></div>
Change those elements like this :
<div id="mainBody"></div>
<div id="triathlete"></div>
Then remove the position:absolute :
#triathlete {
background-image: url(../images/image_triathlete.png);
background-position: top;
background-repeat: no-repeat;
display: block;
left: 3px;
margin: 0;
padding: 87px 30px 0 30px;
/*position: absolute; Remove this
top: 363px;*/
width: 150px;
z-index: 3;
}
And change the height for the container to min :
#container {
min-height:100%;
}
The Demo

Answer 2

If this doesn't work (for any reason), or you feel like implementing it gives you too much or a headache, here is a quick and dirty fix using jQuery:
setInterval(function() {
$("#container").css("height",$(document).height());
},50);
This will automatically resize your container div to envelop all of it's contents, even if they are absolutely positioned.
Noting again, this is not the proper way to solve a problem like this, but might help you if you don't have time to do it the right way.