BODY background image gets cut off on browser viewport

Question

SOLVED
I used the solution proposed by Roman below, based on adding an additional DIV with position:absolute, I tested it in IE7, IE8, IE9, Chrome and Firefox and seems to work fine!

So the layout now has 3 full background images (what I needed), and even you can use the BODY bg taking care of that will be cutted off to the browser's viewport height (still could be useful in some cases), "three and and a half" bg images with "sticky footer" :)

The only drawback I found its that the links in the #footerContent were not "clickable", I solved it using position:relative to this container.

I made the changes to the sample I provided and uploaded it to my Dropbox, In the case that someone else could find it usefull. Thank you all for your answers. http://dl.dropbox.com/u/512412/html_stackoverflow_solution.rar

---

I uploaded

I'm building a quite complex layout for a website where I need to have 3 background images covering the background of the web page. So I have one in the HTML style, one in the BODY style, and the final one in a DIV that it's the container for all the webpage elements (#contenedor)

I'm also sing a "Sticky footer" technique, to have the footer "glued" to the bottom of the page whern there are small contents in the "main content" area.

The problem that I have It's that the BODY bg image gets cut off to the viewport of the web browser, I mean, It doesn't repeat-y below the visible area displayed when the page is loaded, and the contents are "tall" enough to make the webpage scroll.

What I tried until now:

1. To add an additional container DIV surrounding all (that's ok for me), but doing that It brokes the "Sticky footer" (maybe I did not found the right way to do it... I don't know).

2. Force the BODY to be as tall as the HTML using:

   html>body {  
   min-height:100%;  
   height:auto;  
   height:100%; }
   

This solves the BODY issue, the image repeats but this also breaks the "Sticky footer"... :(

You can see a sample:
Index with "small contents" all OK... footer on bottom, etc.
http://carloscabo.com/bg/index.htm

Index page with tall contents (simple BRs), scroll down to see the cut on the BODY bg Image
http://carloscabo.com/bg/index_tall.htm

You can also download all the files of this sample in the following URL to do your own local test.
http://carloscabo.com/bg/stackoverflow_html.zip

Answer 1

For a reason I don't quite catch, it seems that the body is stuck with a height of 100% of the viewport. It refuses to grow past this point, and does not inherit the real height of the whole page.

However, if you don't mind to add another helper div, you can easily solve the problem.

First lets start with the html:
- Add a helper div before the head section.

<div id="contenedor">

    <!--HELPER DIV GOES HERE: BACKGROUND FIX-->
    <div id="bgfix"></div>

    <header id="arriba">
        ...
    </header><!--header#arriba-->

    ...

<div class="push"><!--Sticky Footer Push--></div>
</div><!--contenedor-->

And now let's modify the CSS:
- Remove the background from the body, and put it into the new helper div like so.

body {
    height:100%;
    min-height:100%
    text-align:center;
//  background:url(../img/bg_body.png) center top repeat-y;
    color:#fff;
}

#contenedor {
    position:relative; /* For #bgfix to attach here */
    ...
}

#bgfix {
    background:url(../img/bg_body.png) center top repeat-y;
    position: absolute;
    width: 100%; height: 100%;
    z-index:-1;
}

And VOILA!
Hope it helps!!!

Answer 2

The solution I found for this problem is to set min-height to the

min-height: 900px;

900px was the actual height of the background image i used.