parallax with 100% height divs

Question

Currently I am using backstretch (http://srobbin.com/jquery-plugins/backstretch/) with smooth scroll to anchor to 100% height sections of my one page website. I am trying to incorporate stellar.js parallax (http://markdalgleish.com/projects/stellar.js/) but am having all kinds of problems. Is there an easy way to make this work with 100% height divs? I have 4 divs with heights of 100% and would like them to scroll at different speeds. Currently I am running stellar against the window.

HTML

<div class="main-container" data-stellar-ratio="0.5">
<div class="main-container2" data-stellar-ratio="2">
<div class="main-container3" data-stellar-ratio="0.5">
<div class="main-container4" data-stellar-ratio="2">

CSS

.main-container {
background-image:url(../images/footballfieldblur.jpg);
min-height:100%;
height:100%;
z-index:-100;
position:relative;

}
.main-container2 {
background-image:url(../images/orange3.png);
min-height:100%;
height:100%;
position:relative;

}
.main-container3 {
background-image:url(../images/lightbackground.jpg);
min-height:100%;
height:100%;
position:relative;

}
.main-container4 {
background-image:url(../images/gopherbackground.png);
min-height:100%;
height:100%;
position:relative;
}

Javascript (backstretch.js)

<script>
// You may also attach Backstretch to a block-level element

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

Parallax (stellar.js)

$(document).ready(function() {
      $(window).stellar(); 
      horizontalScrolling:false 
    });
    </script>

Answer 1

Is there any reason why don't you just use straight forward CSS?

Fiddle: http://jsfiddle.net/uzKFu/1/

Basically, support for background-size is pretty good these days.

Try resizing the pane sizes in the fiddle to see the effect.