JSFiddle - React, Tailwind, and code Playground

by Paal Joachim Romdahl

HTML

<div id="backgroundIMG">
    <img src="http://placehold.it/900/f19/000000" />
</div>
<div id="moveme" class="content">
    <div class="left">leftside</div>
    <div class="right">right side</div>
</div>

CSS

body {
    background:#000;
    width:100%;
    height:100%;
}
#backgroundIMG {
    position:fixed;
    z-index:1;
    top:0;
    left:0;
}
#moveme {
    overflow:hidden;
    position:relative;
    z-index:11;
    padding:30px;
    width:90%;
    left:1%;
    height:100%;
    float:left;
    background:#ccc;
}
#moveme .left {
    float:left;
    width:49%;
    background:#fff;
    min-height:340px;
}
#moveme .right {
    float:right;
    width:50%;
    background:#fff;
    min-height:340px;
}

JavaScript

$(function () {

    $WINDOW = $(window),
    $header = $('#moveme'); //im Wrapper of content that will be at bottom

    function setContainerOffset() {
        $header.css({
            top: $WINDOW.height() - 100
        });
    }
    setContainerOffset();
    $WINDOW.resize(setContainerOffset);

});