JSFiddle - React, Tailwind, and code Playground

HTML

<div id="glykopeels" data-bg_img="http://lamininbeauty.co.za/images/products/glykopeel.jpg">Glykopeels Content</div>
<div id="facials" data-bg_img="http://lamininbeauty.co.za/images/products/facial.jpg">Facials Content</div>

<!-- 
trigger the replace background function when the loader image has actually loaded!
rewriting the onload with nothing to prevent infinite loop in IE6 (and greater?) !!
-->
<img src="http://lamininbeauty.co.za/images/products/loader.gif" style="display:none;" onload="this.onload=null; repBg('data-bg_img','div');">

CSS

#glykopeels{
        background: #ebebeb url('http://lamininbeauty.co.za/images/products/loader.gif') no-repeat top right;
        background-size: contain;
    }
#facials{
    background: #ebebeb url('http://lamininbeauty.co.za/images/products/loader.gif') no-repeat top right;
    background-size: contain;
    }

JavaScript

// Replace background after loading image has loaded with real background images,
// Tested in IE6 !!!!! and firefox 12.
// Custom function written by GitaarLAB for 
// http://stackoverflow.com/questions/11915760/preloading-a-background-image-with-a-temporary-gif-image

var repBg=function(a, t){ t=t||'*'; 
        var c=document.getElementsByTagName(t), i=c.length, r=[];
        while(i--){if (c[i].getAttribute(a)){r.push(c[i]);}} c=r; i=c.length;
        repBg.exec=function(){
            c[this['data-i']].style.background="#ebebeb url('"+this.src+"') no-repeat top right";
        };
        while(i--){ if (c[i].getAttribute(a)) {
            r=new Image();
            r.onload=repBg.exec;
            r['data-i']=i;
            r.src=c[i].getAttribute(a);
        }}  
};

// one could run repBg onload, but better to run it when the image has actually loaded, see html!
// window.onload=function(){  repBg('data-bg_img','div');  };