JSFiddle - React, Tailwind, and code Playground

HTML

<div id="scenes"></div>

CSS

#scenes { position: absolute; left: 0; top: 0; width: 900px; height: 4000px; background: url(http://i.imgur.com/agp3t.jpg) left top no-repeat; }

JavaScript

$(function(){
    $('div').each(function(){
        if($(this).css('background-image') != 'none'){
            var bgImage = $(this).css('background-image').replace(/^url|[\(\)]/g, '');
            var image = new Image();
            var attrs = $(this)[0].attributes;
            var dimensions = new Array();
            var canvas = document.createElement('canvas');
            
            dimensions.push($(this).height())
            dimensions.push($(this).width());
            
            $(canvas).attr('width',dimensions[0]);
            $(canvas).attr('height',dimensions[1]);
            $(canvas).css('background-image', 'none');
            
            for(var i = 0; i < attrs.length; i++){
                $(canvas).attr(attrs[i].nodeName,attrs[i].nodeValue);
            }
            
            var ctx = canvas.getContext('2d');
            
            image.onload = function () {
                ctx.drawImage(image, 0, 0, image.height, image.width);
            }
            image.src = bgImage;
        
            $(this).replaceWith(canvas);
        }
    });
});