[SOLVED] Background Images and Sticky Footer

[gevans]

Hey guys, Hopefully someone can give me a hand with this.

 

I have two main divs on my page; #wrapper and #footer. Using css as following to get a sticky footer;

 

/**
* STICKY FOOTER
*/
html,body{
    height: 100%;
}
#wrapper{
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */
}
#push{
    height: 50px;
}

 

#push is the last div inside #wrapper used to properly install the sticky footer.

 

That works perfectly. I have a 2000px high background image that sticks to the bottom and repeats in the x axis. (sticking to the bottom due to a gradient). That's assigned to #wrapper

 

When the page is over 2050px high I get white space where the background has run out (at the top). I have another background image attached to body for that. That works fine excpet for one problem. once the scrollable height is passed 2050px + 100% I get white space in the middle.

 

To explain this better I've attached a slim screenshot of the problem. Due to the background image being very subtle I've drawn in two lines so you can easily find the cut off points.

 

[attachment deleted by admin]

[gevans]

Well, all sorted in one very mixed up css file with lots of relative positioning and z-index's. If any one want details send me a message.