Generated by SassMeister.com.

SassMeister-input-HTML.html

<main>
  
  <div class="detail">
    <h2>Hey Johnnie!</h2> 
    <p>The untold legend</p>
  </div>
  <div class="detail2">test</div>
</main>
<section>
  <h2>Mom said it all</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio nihil nostrum earum molestiae eaque totam, deserunt, nulla magni debitis sunt doloribus quidem repudiandae possimus iure, hic deleniti ipsum esse? Quisquam dolorum hic recusandae minima expedita enim, iure consequatur modi neque quibusdam, officia quidem eius iste obcaecati aliquam. Eius omnis perferendis cumque repellat sunt at error quibusdam, tempora recusandae, voluptates natus nemo quod iusto doloremque optio eum, dolor voluptatem? Asperiores laborum quis hic aspernatur ab nemo. Odit, in explicabo ullam dolores obcaecati nulla qui. Ipsa, a, consequuntur exercitationem consectetur ducimus in hic ea perspiciatis itaque accusantium. Nisi voluptate culpa quia est cum dicta aliquid sequi nam odit id, soluta dolores magni temporibus nihil ab, sed aliquam ut, nulla eius fugit possimus quisquam nostrum earum. Dicta animi sed est iste molestias similique modi hic asperiores aut sit, explicabo harum obcaecati eaque. Ipsa aspernatur placeat architecto deleniti aliquid. Quae nemo dicta perferendis tempora minus corrupti ipsam dolor maxime cum ipsa sed rem, iusto non modi assumenda totam quod laborum, cumque, doloribus, adipisci. Tempore voluptate eius iure quasi vel ut error dignissimos possimus ratione ex accusamus voluptatem obcaecati alias fugiat et magnam quibusdam commodi, vero. Fugit pariatur, cum perspiciatis exercitationem magni! Totam, libero, ut.</p>
</section>

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

@import "toolkit";

@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700);
html{ font-size: 62.5%; }
body{ font-family: 'Source Sans Pro', sans-serif; margin: 0; font-size: 2.0rem; }

@mixin tinted-bg($overlay-color, $alpha-level, $image, $size: normal){
  background: linear-gradient(rgba($overlay-color, $alpha-level), rgba($overlay-color, $alpha-level)), url($image);
  background-size: $size;
}

// Create the Parallax
@include parallax-init(1, body, true);

main {
  position: relative;
  @include tinted-bg(#000, .5, "https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/shoes.jpg", 100%);
  height: 100vh;
  width: 100%;
  text-align: center;
  
  .detail {
    position: absolute;
    @include parallax(.5, 1);
    right: 0;
    left: 0;
    padding: 10px;
    margin: 0 auto;
    color: #fff;
    top: 30%;
  }
  .detail2 {
    position: absolute;
    @include parallax(.15, 1);
    right: 0;
    left: 0;
    padding: 10px;
    margin: 0 auto;
    color: #fff;
    top: 30%;
  }
  
  h2 {
    font-size: 5rem;
  }
}

section {
  padding: 5rem;
}

SassMeister-output.css

@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700);
html {
  font-size: 62.5%; }

body {
  font-family: 'Source Sans Pro', sans-serif;
  margin: 0;
  font-size: 2.0rem; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden; }

body {
  overflow: auto;
  -webkit-perspective: 1px;
  perspective: 1px; }
  body, body * {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d; }

main {
  position: relative;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/shoes.jpg");
  background-size: 100%;
  height: 100vh;
  width: 100%;
  text-align: center; }
  main .detail {
    position: absolute;
    -webkit-transform: translateZ(0.5px) scale(0.5);
    transform: translateZ(0.5px) scale(0.5);
    z-index: 50;
    right: 0;
    left: 0;
    padding: 10px;
    margin: 0 auto;
    color: #fff;
    top: 30%; }
  main .detail2 {
    position: absolute;
    -webkit-transform: translateZ(0.15px) scale(0.85);
    transform: translateZ(0.15px) scale(0.85);
    z-index: 15;
    right: 0;
    left: 0;
    padding: 10px;
    margin: 0 auto;
    color: #fff;
    top: 30%; }
  main h2 {
    font-size: 5rem; }

section {
  padding: 5rem; }

SassMeister-rendered.html

<main>
  
  <div class="detail">
    <h2>Hey Johnnie!</h2> 
    <p>The untold legend</p>
  </div>
  <div class="detail2">test</div>
</main>
<section>
  <h2>Mom said it all</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio nihil nostrum earum molestiae eaque totam, deserunt, nulla magni debitis sunt doloribus quidem repudiandae possimus iure, hic deleniti ipsum esse? Quisquam dolorum hic recusandae minima expedita enim, iure consequatur modi neque quibusdam, officia quidem eius iste obcaecati aliquam. Eius omnis perferendis cumque repellat sunt at error quibusdam, tempora recusandae, voluptates natus nemo quod iusto doloremque optio eum, dolor voluptatem? Asperiores laborum quis hic aspernatur ab nemo. Odit, in explicabo ullam dolores obcaecati nulla qui. Ipsa, a, consequuntur exercitationem consectetur ducimus in hic ea perspiciatis itaque accusantium. Nisi voluptate culpa quia est cum dicta aliquid sequi nam odit id, soluta dolores magni temporibus nihil ab, sed aliquam ut, nulla eius fugit possimus quisquam nostrum earum. Dicta animi sed est iste molestias similique modi hic asperiores aut sit, explicabo harum obcaecati eaque. Ipsa aspernatur placeat architecto deleniti aliquid. Quae nemo dicta perferendis tempora minus corrupti ipsam dolor maxime cum ipsa sed rem, iusto non modi assumenda totam quod laborum, cumque, doloribus, adipisci. Tempore voluptate eius iure quasi vel ut error dignissimos possimus ratione ex accusamus voluptatem obcaecati alias fugiat et magnam quibusdam commodi, vero. Fugit pariatur, cum perspiciatis exercitationem magni! Totam, libero, ut.</p>
</section>