JSFiddle - React, Tailwind, and code Playground

by Chris Menshenin

HTML

<div id="parallax">
        <div id="layer-back">
            <div id="back"></div>
        </div>  
        <div id="layer-base">
   
        </div>
    </div>

CSS

body, html, #parallax {
    overflow-x: hidden;
    overflow-y: auto;}
  
     #parallax {
    perspective: 1px;
    height: 100vh;}
  
     #layer-back {
    position: relative;
    height: 100vh;
    transform-style: preserve-3d;}
    
     #back {
    background: url(http://savepic.ru/15014059.jpg) no-repeat 100% 0;
    background-size: cover;
    top: 0;
    left: -9px !important;
    position: absolute;
    right: 9px !important;
    bottom: 0; 
    transform: translateZ(-1px) scale(2);}
  
     #layer-base {
    position: relative;
    height: 100vh;
    transform-style: preserve-3d;
    background: url(http://savepic.ru/15042730.jpg) repeat-y 100% 0;
    background-size: cover;}