Working with parallax through CSS3

Working with parallax through CSS3

I am working on a one page website where each section's background-image
parallax scrolls over the other. I have the final four sections (news,
videos, connect, contact) working the way that I would like them to.
However, the top three sections (home, about, music) so not do what I
would like them to. The question that I would like to ask is: How can get
the top three sections to act the same as the bottom 4 sections?
Here is my HTML:
<section class="container" id="home"></section>
<section class="container" id="about"></section>
<section class="container" id="music"></section>
<section class="container" id="news"></section>
<section class="container" id="videos"></section>
<section class="container" id="connect"></section>
<section class="container" id="contact"></section>
Here is my CSS:
body{margin: 0px;
padding: 0px;}
.container{width: 1920px;
min-height: 1080px;
background: 100% 100% no-repeat fixed;
margin: 0 auto;
background-color: transparent;}
#home{background: url(../images/landingPage.png);}
#about{background: url(../images/about.png);}
#music{background: url(../images/music.png);}
#news{background-image: url(../images/news.png);}
#videos{background-image: url(../images/videos.png);}
#connect{background-image: url(../images/connect.png);}
#contact{background-image: url(../images/contact.png);}
Does anyone have any thoughts? Here is the question again: How can get the
top three sections to act the same as the bottom 4 sections?
http://jsfiddle.net/g9VxW/
In the following JSFiddle the top three sections scroll down, while the
bottom four sections scroll up over each other.