Expanding page background

1

I have an issue with a background image expanding in the class “page”. This is the basic structure of my web page. As soon as I add content into my content_container and it begines to expand beyond the viewable area of the browser the background image in the page div no longer stretches to accomidate the content.

I quess my first question would be why is it not working or is it working and something else is broken? I can’t figure it out.

Any help appreciated:
here is page link http://dev-miller.virtualhorizons.com/dealer.htm?isOn2


<body>
 <div class="page"> 
  <div class="top_container"></div>
  <div class="menu_container"></div>   
  <div class="content_container"></div>   
  <div class="footer"></div>
 </div>
</body>

css…


body { 
 margin: 0px 0px 0px 0px;
 background-color: #000000;
 background-image: url('../images/main_bg.jpg'); 
 background-repeat:repeat;
 background-position:center top; 
}
html, body { 
  margin: 0 auto; 
  padding: 0px;
  text-align: center;  
  height: 100%; 
} 
.page {
 position: relative;
 width: 937px; 
 margin: 0 auto; 
 text-align: left; 
 min-height:100%; 
 height: auto !important; 
 height: 100%;  
 background-image: url('../images/page_bg.jpg'); 
 background-repeat:repeat-y;   
}
.top_container {
 margin-left:12px;
 width:912px;
 height:100px;
} 
.content_container {
 position:absolute; 
 width: 723px; 
 left:201px; 
 top:100px;  
 /*padding-bottom: 150px;  
 background-color:silver;*/  
}
.dealer_container {
 margin-top:0px;
 margin-bottom:0px; 
 background-color:blue;
 height:300px;
}
.footer { 
 position: absolute;  
 left:12px;
 bottom: 0 !important;
 width: 912px;
 height: 150px;  
}