Container div not expanding with absolutely positioned image

HTML & CSS
1

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

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

When using an image as a background, you shouldn’t use an img tag, it should be in the CSS and you position: absolute; isn’t really the way to do it either.

The way I get backgrounds to stay in position, even when scrolling, is background-attachment: fixed;

3

Yes, I would normally specify the background image in CSS, however I need it to scale to the width of the browser. Do you know if this is possible? Thanks!