Q:

Body background overlaping Div Image Background

I have a simple page that has a background with 2 images, one on the left, one on the right. 
Basicly a absolute positioned fixed DIV (#Background), containing 2 floating DIVs. 
On top of these DIVs I have multiple DIVs all nested in a container (#mainDIV). 
What is strange is wen I scroll down, the body background overlaps the #Background DIV. 
Any advise? 
CSS
* { padding: 0; margin: 0; }
    
html,
body{
    min-height:100%;
    width:100%;
    z-index:-10;
}

#Background{
    position:absolute;
    top:0px;
    left:0px;
    height:100%;
    width:100%;
    z-index:1;
}

#Background_Left{
    float:left;
    width:50%;
    height:100%;
    background:url(images/background_left.jpg) fixed;
    background-repeat:no-repeat;
    background-position:left;
    background-size:contain;
}

#Background_Right{
    float:right;
    width:50%;
    height:100%;
    background:url(images/background_right.jpg) fixed;
    background-repeat:no-repeat;
    background-position:right;
    background-size:contain;
}

#mainDIV{
    position:relative;
    margin: 0 auto;
    width:1000px;
    min-height:100%;
    z-index:10;
}

#BotoesContainer{
    position:relative;
    height:200px;
    background:url(images/banner.png);
    background-repeat:no-repeat;
}

#ConteudoContainer{
    position:relative;
    padding-bottom:70px;
}

HMTL
<body>
<div id="Background">
    <div id="Background_Left"></div>
    <div id="Background_Right"></div>
</div>
<div id="mainDIV">
  <div id="BotoesContainer"></div>
  <div id="ConteudoContainer">Put lots of text here to scroll down</div>
</div>
</body>

I removed all the non esencial code, you can see the current page with the "scroll overlap" Demo here

A:

Your divs are ending when you scroll down.   You can keep them in place by adding
position:fixed;

to #Background

