JSFiddle - React, Tailwind, and code Playground

by insertusernamehere

HTML

<img id="img" class="img" src="http://lorempixel.com/output/nature-q-c-1600-1050-4.jpg" alt="">
        
<div class="content">
    CONTENT
    <br><br>
    This example works fine, but you have to resize the browser once, to see the effect. :)
    <br><br>
    And check out vertical scrolling.
    
    <div style="height:1500px;"></div>
    END
</div>

CSS

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

img.img {
    position:        fixed;
    width:            1600px;
    z-index:        0;
    top:            0;
    left:            0;
}

div.content {
    position:        relative;
    z-index:        1;
    width:            700px;
    height:            2000px;
    margin:            50px auto;
    padding:        20px;
    background:        white;
    opacity:        0.7;
    color:            #333;
}

JavaScript

$(document).ready(function () {

    var body    = $('body');
    var xx        = $('#img');
    
    $(window).resize(function() {
        xx.css('left', (body.width() -  xx.width()) / 2 );
    });
    
    xx.css('left', (body.width() -  xx.width()) / 2 );
    
});