JSFiddle - React, Tailwind, and code Playground

by insertusernamehere

HTML

<div class="background"></div>
<div class="content">
    CONTENT
    <br><br>
    This example works fine until you the viewport size gets smaller than this content. After that the image isn't sticky anymore.
    <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;
}

div.background {
    position:        fixed;
    z-index:        0;
    top:            0;
    left:            0px;
    width:            100%;
    height:            100%;
    background:        transparent url(http://lorempixel.com/output/nature-q-c-1600-1050-4.jpg) no-repeat fixed center top;
}

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