<body>
    <main>
      <div id="overlay"></div>
      <ul id="scene">
        <li class="layer" data-depth="0.1">
          <div class="layer1"></div>
        </li>
        <li class="layer" data-depth="0.2">
          <div class="layer2"></div>
        </li>
      </ul>
      <div class="wrapper">
        <img alt="logo" src="http://i57.tinypic.com/35iw4ki.jpg">        
      </div>
    </main>
</body>
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    backface-visibility: hidden;
}

main {
    width: 100%;
    height: 100vh;
    overflow: hidden;    
}

#overlay {
    background-color: #000;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 99;
    opacity: 0.08;
}

#scene {
    padding: 0;
    margin: 0;
    width: 115%;
    height: 120vh;
    overflow: hidden;
    top: -5%;
    left: -5%;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
}

.wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 101;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    text-align: center;
}

.wrapper img {
  width: 350px;
  height: auto;
}

.layer {
    width: 110%;
    height: 120vh;
    overflow: hidden;
}

.layer2 {
    background-image: url(http://i62.tinypic.com/fx5wd1.png);
    background-size: cover;
    background-position: center;
    position: absolute;
    width: 100%;
    height: 100%;
    left: -5%;
    top: -5%;
}

.layer1 {
    background-image: url(http://i60.tinypic.com/sp94ls.png);
    background-position: center;
    background-size: cover;
    position: absolute;
    width: 100%;
    height: 100%;
    left: -5%;
    top: -5%;
}

@media (max-width:1200px) and (min-width:700px) {
     .wrapper img {
        width: 220px;
        height: auto;
    } 
}

@media (max-width:700px) {
    .layer2 {
        background-size: cover;
        background-position: center;
        width: 167%;
        height: 77vh;
        left: -69%;
        top: 27%;
    }
    
    .layer1 {
        background-position: center;
        background-size: cover;
        width: 100%;
        height: 115%;
        left: -5%;
        top: -1%;
    }    
    
    .wrapper img {
        width: 180px;
        height: auto;
    }
}
$('#scene').parallax();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/parallax/1.1.1/jquery.parallax.min.js