Question

My page looks like this

<div id="wrapper">
    <div id="header"></div>
    <div id="main"></div>
</div>

The header has a fixed height.
The main div has a background-image.

I want the main div to be displayed to fill the whole screen, so that the image is displayed at the very bottom.

So I did:

div#main {
    background-repeat: repeat-x;
    background-position: left bottom;
    background-image: url(url);

    height:100%;
    min-height:100%;
}

This didn’t work, how can I set a divs height to fill the whole screen?

Another solution would be to set the image to the body:

body {
    background-repeat: repeat-x;
    background-position: left bottom;
    background-image: url(url);
} 

Here I got the problem, that on scroll the image is not fixed at the bottom. It actually fixed to the height of the windows size.

background-attachment: fixed; isn’t the solution either, because the background-image doesn’t scroll at all.

---

Clarification

When the content is too large => There is a scroll bar, the background-image isn’t fixed at the bottom anymore. That’s the main problem. It’s just the background-color of the body

---

@AndreaLigios

This is what I mean:

SOURCE

Check it out at http://themelandia.ilijatovilo.ch
Resize the window until the content is larger, and then scroll down.
Hopefully you’ll see what I mean then.

Answer 1

EDIT: final solution based on your site:

add

overflow: auto;
position: fixed;

to your div#wrapper rule.

---

EDIT:

New solution: http://jsfiddle.net/SxPyW/2/

added top: 0; , padding-top: 100px; and z-index: 1;

---

Do you mean this ?

Demo: http://jsfiddle.net/SxPyW/

With absolute positioning, but with image scrolling up when scrolling the page (not the fixed behavior) ?

#main {  
   /* ... your stuff... */
    border: 2px solid blue;
    position: absolute;
    top: 100px;
    bottom: 0;
    left: 0;
}

(borders inserted to show boundaries, they overlap each other here, if you need borders adjust the top attribute accordingly)