Background Image wont repeat vertically beyond the ContentPlaceHolder and Child Page

Question

I think this should be an easy problem to solve, however its turned into something I cant solve.

For whatever reason my background image (main_bg.gif) specified within global-inner and used within the MasterPage will only repeat vertically for the Content Page within the MasterPage, if in fact that ContentPage contains no other div.

For the rest of the div's within the MasterPage such as bottom-wrap, the image (main_bg.gif) will not stretch down for it. It only repeats for whats contained within the Content Page.

Here is top-feature used within the CSS for the Child Page, which doesnt enable the image within global-inner to repeat:

#top-feature 
{
height:330px;
width: 848px;
margin: 12px 0 0 16px;
/*background: #E4EAEF;*/
background: orange;
/*padding: 10px 0 0 10px;*/
position: absolute;
text-align: left;
}

Here is the CSS used within the MasterPage:

body
{
background-color: #9EB0C8;
font-family: Arial,Helvetica,sans-serif;
font-size: 62.5%;
}    

#global-wrap 
{
width: 100%;
margin: 0 auto;
text-align: left;
width: 880px;
overflow: hidden;
}    

#global-inner 
{
background: url("/images/main_bg.gif") repeat-y scroll 0 0 #E4EAEF;
font-family: Arial;
font-size: 1.2em;
margin: 15px 0 0 0;
overflow: hidden;
text-align: left;
width: 880px;
}

Here is the HTML w/in the MasterPage. Again anything beyond the ContentPlaceHolder ie bottom-wrap, will not be included in that image (main_bg.gif) :

<div id="global-wrap">
    <div id="global-inner">
        <asp:ContentPlaceHolder ID="MainContent" runat="server" />
        <div id="bottom-wrap">
            <div id="copyright">
                Copyright © 2011 by DaVinci's Painting, Inc.
                <br />
                2111 Jefferson Davis Hwy, Arlington, Virginia
                <br />
                Call Direct: 202-460-1754
                <br />
                Site Development by <a target="blank" href="http://www.websitedeveloper.com">WebSiteDeveloper.com</a>
            </div>
            <div id="bottom-logos">
            </div>
            <div id="sociales">
                <span class="st_twitter_large" displaytext="Tweet"></span><span class="st_facebook_large"
                    displaytext="Facebook"></span><span class="st_ybuzz_large" displaytext="Yahoo! Buzz">
                    </span><span class="st_gbuzz_large" displaytext="Google Buzz"></span><span class="st_email_large"
                        displaytext="Email"></span><span class="st_sharethis_large" displaytext="ShareThis">
                        </span>
            </div>
        </div>
    </div>
</div>

Answer 1

By adding overflow:hidden; to your #global-inner style, this will solve the problem of the floats not being cleared and display the background image.

Also, it's probably not the best idea or practice using separate empty DIVs for the left and right corners. Have you looked into CSS3 rounded corners as an alternative to using images?

For example:

    -moz-border-radius-topleft: 5px;
    -webkit-border-top-left-radius: 5px;
    border-top-left-radius: 5px;

    -moz-border-radius-topright: 5px;
    -webkit-border-top-right-radius: 5px;
    border-top-right-radius: 5px;

Answer 2

The Child Div's of a Parent Div containing an Image that needs to be vertically repeated, cannot have their position set to absolute.

In my example of the MasterPage: bottom-wrap had its position set to absolute. When this was changed to position:relative, the parent image within global-inner vertically stretched all the way down to include the bottom-wrap div.