# Expanding page background

**URL:** <https://forum.kirupa.com/t/expanding-page-background/273922>\
**Category:** Uncategorized\
**Created:** [October 22, 2008, 3:50pm UTC](https://forum.kirupa.com/t/expanding-page-background/273922 "2008-10-22T15:50:18Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Navarone](https://avatars.discourse-cdn.com/v4/letter/n/f9ae1b/32.png) [@Navarone](https://forum.kirupa.com/u/Navarone)\
**Post date:** [October 22, 2008, 3:50pm UTC](https://forum.kirupa.com/t/expanding-page-background/273922/1 "2008-10-22T15:50:18Z")

</div>

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](http://dev-miller.virtualhorizons.com/dealer.htm?isOn2)

```auto

<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…

```auto

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;  
}

```