JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li><span>test1</span></li>
        <li><span>test1</span></li>
        <li><span>test1</span></li>
</ul>

<p>lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum...

SCSS

html,body{
    height : 150%;
}

ul {
    position : fixed;
    z-index : 1;
    top : 0;
    left : 0;
    width : 100%;
    margin : 0;
    padding : 0;
    overflow : auto;
    
    li {
        float : left;
        width : 33%;
        height : 100px;
        background : red;
        position : relative;
        list-style: none;
        
        span{
            display:block;
            position : relative;
        }
    }
}
div {
    position : fixed;
    z-index : -1;
    top : 0;
    left : 0;
    
    canvas{
        opacity : 0.5
    }
}

JavaScript

function resizeCanvas() {
    var canvas = document.querySelector('canvas');
    var context = canvas.getContext('2d');
    canvas.height = $(window).height();
    canvas.width = $(window).width();

    loadProperImage('http://www.placehold.it/500x500', function () {

        var img_ratio = this.width / this.height;
        var canvas_ratio = canvas.offsetWidth / canvas.offsetHeight;

        var img_x, img_y, img_width, img_height;

        if (canvas_ratio < img_ratio) {
            img_y = 0;
            img_height = canvas.offsetHeight;

            img_width = this.width * canvas.offsetHeight / this.height;
            img_x = (img_width - canvas.offsetWidth) / -2;
        } else {
            img_x = 0;
            img_width = canvas.offsetWidth;

            img_height = this.height * canvas.offsetWidth / this.width;
            img_y = (img_height - canvas.offsetHeight) / -2;
        }

        context.clearRect(0, 0, canvas.width, canvas.height);
        context.drawImage(this, 0, 0, this.width, this.height, img_x, img_y, img_width, img_height);
    });
};

function loadProperImage(link, callback) {
    var image_link = link;

    var image = document.createElement('img');
    image.src = image_link;

    image.onload = callback;

    image.onerror = function () {}
}

$(window).on('resize', resizeCanvas).trigger('resize');

$(window).scrollTop(500)