SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jul 2008
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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:
    HTML Code:
            	<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:
    Code:
    #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. #2
    Non-Member
    Join Date
    Sep 2007
    Posts
    148
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    SitePoint Member
    Join Date
    Jul 2008
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •