CSS Background 100% Height Problem

Live example of background issue: http://webid3.feckcorp.com/

As you can see the gray stripped background image flows over the bottom of the footer and leaves about 115 extra pixels below the footer. The div that contains the background image is <div id="home_page_back"> and is contained within the body element, both of which are set at a height开发者_高级运维 of 100%.

I want the background image to hit the footer and then stop … not go any further past it. Can someone please advise?

Also - I do not want to place the image as a background of the body.

Cheers!

Copy of the CSS:

body {
    margin: 0px;
    padding: 0px;
    height:100%;
    background-color: #f3f3f3;

    font-family: Arial;
    font-size: 12px;
    color: #333333;
}

#home_page_back {
    background:#9C9D9B url(http://templatemints.com/rttheme13/images/background_images/abstract_background7.jpg) top center no-repeat !important;
    display: block;
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
}

I think it's the way you structured your markup, actually. Place the content below

<div id="home_page_back" style="display: block;"></div>

inside of it, remove the 100% height rule and replace it with overflow:hidden. The content will expand that div out to see the background image. As it stands now, you've made it a separate, absolutely positioned div and given it 100% height, which makes it at big as the background image you have inside it, and it expands beyond any of the content coming after it because that content now ignores it in the layout (because it's positioned absolutely.) At least that's the theory I'm going with :)

If you want the height 100% to work like that, give the body element 100% height, and the html element also 100% height.

Add overflow: hidden; to your body css. And please, try validating your html before doing anything else and before looking for help.

@feck; may you have want an sticky footer check this answer .

Use:

#home_page_back {
    background:#9C9D9B url(http://templatemints.com/rttheme13/images/background_images/abstract_background7.jpg) top center no-repeat !important;
    padding-bottom: 30px;
}

Wrap "home_page_back" div around "content" div in the html instead.

Remove margin-top from #footer css.

Then, if you want it, you can add the space after the footer.