JSFiddle - React, Tailwind, and code Playground

HTML

<div id="background"></div>
<div id="content"></div>

CSS

#background {
    /* fixed position - aways on top of the screen */
    position: fixed;
    top: 0;
    left: 0;
    
    /* set repeat-x so it doesn't run off */
    background: url(http://dummyimage.com/3000x100/333/999.png&text=foobarfoobarfoobarfoobarfoobar) repeat-x;
    
    /* you MUST set width and height or it won't display */
    width: 100%;
    height: 100px;
    
    /* -1 to ensure it will always be in background */
    z-index: -1;
}

#content{
    width: 500px;
    margin: 0 auto;
    background: #b0b0b0;
}

JavaScript

// add content

var content = document.querySelector("#content");
for(var i=0;i<50;i++) {
    var e = document.createElement("P");
    e.innerHTML = "some text";
    content.appendChild(e);
}

// event which fires on scroll
window.onscroll = function () {
    // get background element and defaultView (for css style attribute value)
    var background = document.querySelector("#background");
    var dv = (background.ownerDocument || document).defaultView;
    // parse the value of current background position and add window.scrollY - vertical scroll (divide this for slower background scroll)
    var offset = parseInt(dv.getComputedStyle(background)["backgroundPositionX"]) + window.scrollY;
    background.style.backgroundPositionX = offset + "px";
}