// source http://jsbin.com/xoyigugiqi

index.html

<style id="jsbin-css">
html,body {
  height: 100%;
}

body {
  background: #f6f6f6;
  margin: 0 0 0;
  padding: 0;
  font-family: Helvetica, Arial, sans-serif;
}

.header {
  width: 100%;
  position: fixed;
  height: 100px;
  top: 0;
  z-index: 100;
  background: #fff;
}

.container {
  position: relative;
}

.section {
  position: relative;
  width: 100%;
  height: 400px;
  background: #99A478;
}
 
.section h1 {
    position: absolute;
    z-index: 2;
    top: 0; right: 0; bottom: 0; left: 0;
    margin: auto;
    color: #fff;
    width: 50%;
    height: 1rem;
    text-align: center;
}

.section-image {
  width: 100%;
  padding: 0;
}

.section-clip {
    position: absolute;
    clip: rect(auto,auto,auto,auto);
    width: 100%;
    height: 100%;
}

.img-1 {
  background: #99A478 url(http://i.imgur.com/hVWBksT.jpg) no-repeat 50% 50%;
  background-size: cover;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
}

.img-2 {
  background: #99A478 url(http://i.imgur.com/P1RvfyH.jpg) 50% 50%;
  position: fixed;
  background-size: cover;
  width: 100%;
  height: 100%;
  top: 0;
}

.img-3 {
  background: #99A478 url(http://i.imgur.com/gqEmQlE.jpg) 50% 50%;
  position: fixed;
  background-size: cover;
  width: 100%;
  height: 100%;
  top: 0;
}

.img-4 {
  background: #99A478 url(http://i.imgur.com/z7Zbh9f.jpg) 50% 50%;
  position: fixed;
  background-size: cover;
  width: 100%;
  height: 100%;
  top: 0;
}

.footer {
  position: relative;
  background: #333;
  overflow: hidden;
}

.footer p {
    color: #fff;
    margin: 1em 2em;
}
</style>
<div class="header">
    <p>Alternate Fixed &amp; Scroll Backgrounds</p> 
</div>
<div class="container">
  <div class="section section-img">
      <h1>Lorem ipsum dolor sit amet.</h1>
      <div class="section-clip">
        <div class="img-1"></div>
      </div>
    </div>
  <div class="section">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi, mollitia, repellendus sapiente repudiandae labore rerum amet culpa inventore, modi non. Quo nisi veritatis vitae nam, labore fugit. Inventore culpa iusto, officia exercitationem.</p>
    </div>
    <div class="section section-img">
      <h1>Lorem ipsum dolor sit amet.</h1>
      <div class="section-clip">
        <div class="img-2"></div>
      </div>
    </div>
    <div class="section">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi, mollitia, repellendus sapiente repudiandae labore rerum amet culpa inventore, modi non. Quo nisi veritatis vitae nam, labore fugit. Inventore culpa iusto, officia exercitationem.</p>
    </div>
    <div class="section section-img">
      <h1>Lorem ipsum dolor sit amet.</h1>
      <div class="section-clip">
        <div class="img-3"></div>
      </div>
    </div>
    <div class="section">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi, mollitia, repellendus sapiente repudiandae labore rerum amet culpa inventore, modi non. Quo nisi veritatis vitae nam, labore fugit. Inventore culpa iusto, officia exercitationem.</p>
  </div>
   <div class="section section-img">
      <h1>Lorem ipsum dolor sit amet.</h1>
      <div class="section-clip">
        <div class="img-4"></div>
      </div>
    </div>
      <div class="section">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi, mollitia, repellendus sapiente repudiandae labore rerum amet culpa inventore, modi non. Quo nisi veritatis vitae nam, labore fugit. Inventore culpa iusto, officia exercitationem.</p>
  </div>
</div>
<div class="footer">
  <p>footer</p>
</div>

<script id="jsbin-source-css" type="text/css">html,body {
  height: 100%;
}

body {
  background: #f6f6f6;
  margin: 0 0 0;
  padding: 0;
  font-family: Helvetica, Arial, sans-serif;
}

.header {
  width: 100%;
  position: fixed;
  height: 100px;
  top: 0;
  z-index: 100;
  background: #fff;
}

.container {
  position: relative;
}

.section {
  position: relative;
  width: 100%;
  height: 400px;
  background: #99A478;
}
 
.section h1 {
    position: absolute;
    z-index: 2;
    top: 0; right: 0; bottom: 0; left: 0;
    margin: auto;
    color: #fff;
    width: 50%;
    height: 1rem;
    text-align: center;
}

.section-image {
  width: 100%;
  padding: 0;
}

.section-clip {
    position: absolute;
    clip: rect(auto,auto,auto,auto);
    width: 100%;
    height: 100%;
}

.img-1 {
  background: #99A478 url(http://i.imgur.com/hVWBksT.jpg) no-repeat 50% 50%;
  background-size: cover;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
}

.img-2 {
  background: #99A478 url(http://i.imgur.com/P1RvfyH.jpg) 50% 50%;
  position: fixed;
  background-size: cover;
  width: 100%;
  height: 100%;
  top: 0;
}

.img-3 {
  background: #99A478 url(http://i.imgur.com/gqEmQlE.jpg) 50% 50%;
  position: fixed;
  background-size: cover;
  width: 100%;
  height: 100%;
  top: 0;
}

.img-4 {
  background: #99A478 url(http://i.imgur.com/z7Zbh9f.jpg) 50% 50%;
  position: fixed;
  background-size: cover;
  width: 100%;
  height: 100%;
  top: 0;
}

.footer {
  position: relative;
  background: #333;
  overflow: hidden;
}

.footer p {
    color: #fff;
    margin: 1em 2em;
}</script>

jsbin.xoyigugiqi.css

html,body {
  height: 100%;
}

body {
  background: #f6f6f6;
  margin: 0 0 0;
  padding: 0;
  font-family: Helvetica, Arial, sans-serif;
}

.header {
  width: 100%;
  position: fixed;
  height: 100px;
  top: 0;
  z-index: 100;
  background: #fff;
}

.container {
  position: relative;
}

.section {
  position: relative;
  width: 100%;
  height: 400px;
  background: #99A478;
}
 
.section h1 {
    position: absolute;
    z-index: 2;
    top: 0; right: 0; bottom: 0; left: 0;
    margin: auto;
    color: #fff;
    width: 50%;
    height: 1rem;
    text-align: center;
}

.section-image {
  width: 100%;
  padding: 0;
}

.section-clip {
    position: absolute;
    clip: rect(auto,auto,auto,auto);
    width: 100%;
    height: 100%;
}

.img-1 {
  background: #99A478 url(http://i.imgur.com/hVWBksT.jpg) no-repeat 50% 50%;
  background-size: cover;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
}

.img-2 {
  background: #99A478 url(http://i.imgur.com/P1RvfyH.jpg) 50% 50%;
  position: fixed;
  background-size: cover;
  width: 100%;
  height: 100%;
  top: 0;
}

.img-3 {
  background: #99A478 url(http://i.imgur.com/gqEmQlE.jpg) 50% 50%;
  position: fixed;
  background-size: cover;
  width: 100%;
  height: 100%;
  top: 0;
}

.img-4 {
  background: #99A478 url(http://i.imgur.com/z7Zbh9f.jpg) 50% 50%;
  position: fixed;
  background-size: cover;
  width: 100%;
  height: 100%;
  top: 0;
}

.footer {
  position: relative;
  background: #333;
  overflow: hidden;
}

.footer p {
    color: #fff;
    margin: 1em 2em;
}