JSFiddle - React, Tailwind, and code Playground

HTML

<div id="background-left"></div>
<div id="background-right"></div>
<nav id="nav">Nav</nav>
<div id="content">Content</div>

CSS

#nav {
    margin: 0;
    height: 50px;
    background: #fff;
    position: relative;
}

#content {
    margin: 300px 0 0 0;
    height: 600px;
    background: #fff;
    position: relative;
}

#background-left {
    background: url('http://placekitten.com/g/600/350') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 350px;
    float: left;
    width: 50%;
}

#background-right {
    background: url('http://placekitten.com/g/500/350') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 350px;
    float: left;
    width: 50%;
}

JavaScript

$(function() {
    $(window).on('scroll', function() {
        $('#background-left').css('margin-top', $(window).scrollTop() * -0.3);
        $('#background-right').css('margin-top', $(window).scrollTop() * -0.3);
    });
});