JSFiddle - React, Tailwind, and code Playground

HTML

<div id="scroll-pos"></div>

    <header>
      <svg><path d="M62.146,49.999L92.364,19.78c1.159-1.159,1.159-3.037,0-4.195l-7.95-7.95c-1.158-1.158-3.036-1.158-4.195,0L50,37.854  L19.781,7.635c-1.158-1.158-3.037-1.158-4.196,0l-7.95,7.95c-1.159,1.158-1.159,3.036,0,4.195l30.219,30.219L7.636,80.219  c-1.16,1.159-1.16,3.037,0,4.195l7.949,7.95c1.159,1.159,3.038,1.159,4.196,0L50,62.146l30.218,30.218  c1.159,1.159,3.037,1.159,4.195,0l7.95-7.95c1.159-1.158,1.159-3.036,0-4.195L62.146,49.999z"></path></svg>
    </header>

    <main>
      <article>
        <h1>Odd Future street art hoodie readymade.</h1>
        <p>Ethical pug hella church-key forage seitan, cred American Apparel typewriter Tumblr fap fixie. Etsy synth meh raw denim lomo seitan. Thundercats kale chips swag, aesthetic Pitchfork readymade flannel slow-carb Cosby sweater authentic food truck.</p>
      </article>
    </main>

    <main>
      <article>
        <h1>High Life Bushwick hoodie occupy letterpress direct trade +1.</h1>
        <p>Raw denim leggings Shoreditch freegan, banh mi Echo Park Wes Anderson brunch sartorial. Blue Bottle Schlitz pour-over direct trade irony, literally gastropub next level mustache Cosby sweater tote bag viral locavore.</p>
      </article>
    </main>

CSS

body {
  background-color: #222;
  color: black;
  font-family: Merriweather;
  font-size: 0.9em;
  line-height: 1.8em;
  margin: 0;
}

body::after {
  content: "";
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: fixed;
  z-index: -1; 
  background-image: url(http://vaughnroyko.com/jsfiddle/back.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  transform: translatez(0);
}

header {
  overflow: hidden;
  height: 50%;
  width: 100%;
}

html, body {
  height: 100%;
}

header, main {
  padding: 30px;
}

h1 {
  color: white;
}

svg {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -50px;
  margin-top: -50px;
  width: 100px;
  height: 100px;
}

path {
  fill: white;
  opacity: 0.7;
}

main {
  display: table;
  height: 70%;
  width: 100%;
}

article {
  display: table-cell;
  position: relative;
  vertical-align: middle;
}

h1, p {
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;

}
/* For mobile devices */
@media only screen and (max-width: 767px) {
  body {
    background-image: url(images/background-photo-mobile-devices.jpg);
  }
}

JavaScript

$(window).scroll(function(){
      var fromtop = $(document).scrollTop();
     $('body').css({'background-image': 'url(http://vaughnroyko.com/jsfiddle/back.png)'}).css({opacity: 1 - fromtop / ($(window).height() + 500)});
    });