Container div not expanding with absolutely positioned image

Hi,

I'm having a bit of a problem with a container div not expanding with an absolutely positioned image.

I'm creating a vertically scrolling site with all pages contained in single page. The landing page (ie- the one at the top) has an image that needs to fill the screen. However, the problem I am having is that because the background image is positioned absolutley (in order for it to appear in the background), the div underneath is overlapping the div above and cropping the bottom of the large image. It seems to be that the background image in the top div is not expanding the container div.

Any suggestions would be really appreciated!
Many thanks,
Paul

HTML:

        	<div id="homepage_wrap"><!-- THIS IS THE TOP DIV WITH THE BG IMAGE -->
            	<div id="submenu">
                    <a href="javascript:void(0)" onClick="goToByScroll('main_wrap')">HOME /</a>
                    <a href="javascript:void(0)" onClick="goToByScroll('about')">ABOUT /</a> 
                    <a href="javascript:void(0)" onClick="goToByScroll('showreel')">SHOWREEL /</a>
                    <a href="javascript:void(0)" onClick="goToByScroll('credits')">CREDITS /</a>
                    <a href="javascript:void(0)" onClick="goToByScroll('gallery')">GALLERY /</a>
                    <a href="javascript:void(0)" onClick="goToByScroll('location')">CONTACT</a>
        		</div><!-- End submenu -->
                  
                <img src="images/home_logo.png" width="798" height="103" alt="Heidi Mumford logo" />
                 <img src="images/home_background_img1.jpg" class="background" />
                 
               	<div class="view_showreel">
                    <div align="center"><a href="javascript:void(0)" onClick="goToByScroll('header_wrap')"></a></div>
              </div><!-- End 'view_showreel' --> 
 
              <br class="clear" />
  </div><!-- End homepage_wrap -->

<div id="about"><!-- THIS IS THE DIV THAT IS OVERLAPPING THE ONE ABOVE -->
		<h1>ABOUT</h1>
  </div><!-- about -->

HTML:

CSS:

#homepage_wrap{
	width:100%;
	min-height:100%;
	text-align:center;
	overflow:auto;
}

img.background { 
	width: 100%;
	position:absolute;
	left:0px;
	top:0px;
	z-index:-1;
	min-width:880px;
}

.clear {clear:both;}

Code (markup):

 

Of course it doesn't. It's not supposed to. I don't see a way around it with what you have.

 

with -1 zindex that will not appear