1

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;
}
Dori
  • 915
  • 1
  • 12
  • 20

5 Answers5

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

kinakuta
  • 9,029
  • 1
  • 39
  • 48
  • Everything you said there makes sense but I tried doing so and it made the background image disappear. See I set the height rule to 100% because it was the only way that I could make the image appear (or else it would have a width of 100% and height of 0% - auto doesn't work either..). I need to explore not using absolute position I guess, or I might just give up on even using a background image at all! :( Thanks for the help and any more light you could shed on this.. –  Jun 15 '11 at 04:22
  • I made a local copy of your site, moved the div to surround everything below it, with it closing right after div#footer, and it worked for me. The background image was there and everything. – kinakuta Jun 15 '11 at 05:51
  • Ah, I see your comment above about wanting the background to fade in. I'll take a look at it again. – kinakuta Jun 15 '11 at 05:52
  • I don't have a solution for you. Maybe think about a different way to animate a background image - like animating the position of the background with a gradient to make it look like it's changing from one color to another. The fading in thing is beyond me at this point. – kinakuta Jun 15 '11 at 08:09
  • That's okay - I figured out a solution by using the min-width CSS rule, so my code looks like this: #background-wrap img { position: absolute; z-index: -1; width: 100%; min-width:980px; } Now I just need to add a sticky footer and I'll be set. –  Jun 15 '11 at 15:41
  • Thanks for all the help by the way - I gave you the checkmark because of the time you spent on it and how close you came to the solution (it was actually your answer that made me find my way to the min-width CSS rule). Thanks again! –  Jun 15 '11 at 15:43
0

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

Amr Elgarhy
  • 66,568
  • 69
  • 184
  • 301
0

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

AR.
  • 1,935
  • 1
  • 11
  • 14
  • AR, thank you for the reply - I added `overflow:hidden;` to the body css but it ends up chopping off half of the footer. Thank you though! –  Jun 15 '11 at 04:23
0

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

Community
  • 1
  • 1
sandeep
  • 91,313
  • 23
  • 137
  • 155
  • I think this might work. I will try it out and get back to you - thank you! –  Jun 15 '11 at 04:24
0

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.

BCDeWitt
  • 4,540
  • 2
  • 21
  • 34
  • _"Wrap "home_page_back" div around "content" div in the html instead."_ That's actually where this whole problem comes from - I can't wrap it around the content div because I want only the home_page_back div to fade in from JQuery (wrapping it around the content would cause the content div to fade in also). Otherwise it would be the perfect solution.. Any other ideas? Thank you for the help :) –  Jun 15 '11 at 04:27
  • Sure, I have more ideas. How about wrapping the "home_page_back" div, the "content" div and the "footer" div in another absolutely positioned div with height:auto? "home_page_back" could be absolutely positioned within the new container so it doesn't mess with the layout of "content". – BCDeWitt Jun 15 '11 at 04:45
  • One more idea...Change `#home_page_back { width:100%; height:100% }` to `#home_page_back { top:0px; bottom:0px; left:0px; right:0px }` – BCDeWitt Jun 15 '11 at 05:01
  • These did not work unfortunately, but thank you so much for the help. –  Jun 15 '11 at 15:44