JSFiddle - React, Tailwind, and code Playground

by afelixj

HTML

<div class="section-background">

      <div class="section-background-image " data-stellar-ratio="0.4">
        <img src="http://lorempixel.com/1000/1000/nature/" alt="" style="opacity: 0.3;">
      </div>

    </div>

CSS

.section-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}
.section-background-image {
    position: relative;
    /* right:-30%; */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    direction: rtl;
}
.section-background-image img {

    position: relative;
    /* right:-30%; */
    min-width: 100%;
    max-width: none;
    min-height: 100%;
    top: 0;
    left: 0;
    top:50%;
    transform: translateY(-50%);
}