backstretch 100% div height

Question

I am using the backstretch jquery plugin with multiple divs as backgrounds (sections.) Currently I am using fixed heights but I want the divs to be 100% height of the window and the page to be scrollable. How can I accomplish this?

HTML

<div class="main-container"></div>
<div class="main-container2"></div>
<div class="main-container3"></div>
<div class="main-container4"></div>

CSS

.main-container {
background-image:url(../images/footballfieldblur.jpg);
height:1000px;
z-index:-100;

}
.main-container2 {
background-image:url(../images/orange3.png);
height:1000px;

}
.main-container3 {
background-image:url(../images/lightbackground.jpg);
height:1000px;

}
.main-container4 {
background-image:url(../images/diamondplatebackground.jpg);
height:1000px;

}
JAVASCRIPT

<script>
$(".main-container").backstretch("images/footballfieldblur.jpg");
$(".main-container2").backstretch("images/orange3.png");
$(".main-container3").backstretch("images/lightbackground.jpg");
$(".main-container4").backstretch("images/diamondplatebackground.jpg");
</script> 

Answer 1

body{
  height:100%;
  overflow:scroll;
}

.main{
  height:100%;
}