<header>
  <div class="content">
    <h1>Parallax Effect</h1>
    <p>Just CSS // No Javascript</p>
    <p>
      <small>
        <a href="http://danielfarias.net">danielfarias.net</a>
      </small>
    </p>
  </div>
</header>

<div class="text">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin venenatis lorem id dui elementum, vitae congue velit egestas. Phasellus vulputate egestas velit. Mauris ultricies blandit risus, gravida scelerisque enim blandit sit amet. Suspendisse dictum erat sed libero suscipit sodales at molestie lorem. Maecenas sagittis justo eget dolor venenatis accumsan nec nec lacus. Vestibulum vehicula posuere elit non cursus. Nam ullamcorper consectetur lectus, tincidunt sodales massa volutpat at. Ut tempus dictum ex eget lacinia. Fusce et risus tristique, facilisis massa vitae, iaculis arcu.</p>

  <p>Integer bibendum sagittis lectus, ut aliquam lectus posuere eu. Nullam vitae facilisis ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempor vestibulum metus eget hendrerit. Duis dapibus nibh ac fermentum hendrerit. Aenean erat ex, venenatis id consectetur nec, laoreet et ipsum. Vestibulum id feugiat metus.</p>
</div>
html{
    height: 100%;
    overflow: hidden;
}
body{
    color: #fff;
    margin: 0;
    padding: 0;
    perspective: 1px;
    transform-style: preserve-3d;
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    font-family: "Roboto";
}

header{
    display: table;
    min-height: 100vh;
    position: relative;
    transform-style: inherit;
    width: 100vw;
}

header * {
    text-align: center;
    margin: 0;
    padding: 0.2em 0;
}

header h1 {
    font-size: 5em;
}

header p, a{
    font-weight: 100;
}

header a{
    color: #00FFFF;
}

header, header:before{
    background: 50% 50% / cover;
}
header::before{
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    display: block;
    background-image: url(https://images.pexels.com/photos/108486/pexels-photo-108486.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
    background-size: cover;
    transform-origin: center center 0;
    transform: translateZ(-1px) scale(2);
    z-index: -1;
    min-height: 100vh;
}

.content{
    vertical-align: middle;
    display: table-cell;
}

.text{
    color: #fff;
    margin: 0;
    padding: 60px;
    background: #222;
    position: relative;
    min-height: 100vh;
    heigth: 100%;
}
Rerun