Question

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

Answer 1

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 🙂