Edit in JSFiddle

function initBgImage(root_el) {
        var miniatureImg = root_el.querySelector(".thumbnail");
        var canvas = root_el.querySelector(".progressive-img-load-canvas");
        drawMiniatureForBgImage(root_el, miniatureImg, canvas);
    }
    
function drawMiniatureForBgImage(root_el, miniatureImg, canvas) {
    var thumbnail = new Image();
    thumbnail.onload = function () {
        offsets = [];
        window.getComputedStyle(root_el, null).backgroundPosition.split(" ").forEach(function(offset) {
            offsets.push(parseInt(offset) / 100);
        });
        var canvasImage = new CanvasImage(canvas, thumbnail, canvas.offsetWidth, canvas.offsetHeight, offsets[0], offsets[1]);
        canvasImage.blur(2);
    };
    thumbnail.src = miniatureImg.src;

}



function loadFullBgImage(root_el) {
		var fullBgImg = root_el.querySelector(".full-bg-image"),
        canvas = root_el.querySelector(".progressive-img-load-canvas");
    console.log(canvas);
    console.log(fullBgImg);
    function fullBackgroundImageLoaded() {
        root_el.style.backgroundImage = 'url(' + fullBgImg.src + ')';
        window.requestAnimationFrame(function() {
        root_el.classList.add("full-loaded");
        });
        
    } 
    if (fullBgImg.src && fullBgImg.complete) {
        fullBackgroundImageLoaded();
    } else {
        fullBgImg.addEventListener('load', fullBackgroundImageLoaded);
        fullBgImg.addEventListener('error', console.log);
        if (fullBgImg.hasAttribute("data-src")) {
            fullBgImg.src = fullBgImg.dataset.src;
        }
    }
    
    
}

// source: pilpil.js
CanvasImage = function (canvasEL, image) {
    this.image = image;
    this.element = canvasEL;
    canvasEL.width = image.width;
    canvasEL.height = image.height;
    this.context = canvasEL.getContext('2d');
    this.context.drawImage(image, 0, 0);
};
CanvasImage.prototype = {
    blur:function(e) {
        this.context.globalAlpha = 0.5;
        for(var t = -e; t <= e; t += 2) {
            for(var n = -e; n <= e; n += 2) {
                this.context.drawImage(this.element, n, t);
                var blob = n >= 0 && t >= 0 && this.context.drawImage(this.element, -(n -1), -(t-1));
            }
        }
    }
};
var img = document.getElementById("ex1")
initBgImage(img);
loadFullBgImage(img);


<div class="progressive-bg-image" id="ex1">
	<!-- Progressively loads the background -->
	<img class="hidden thumbnail" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAtAC0AAD/4QL8RXhpZgAATU0AKgAAAAgACQEPAAIAAAAKAAAAegEQAAIAAAAIAAAAhAESAAMAAAABAAEAAAEaAAUAAAABAAAAjAEbAAUAAAABAAAAlAEoAAMAAAABAAIAAAExAAIAAAAvAAAAnAEyAAIAAAAUAAAAzIdpAAQAAAABAAAA4AAAAABQYW5hc29uaWMARE1DLVRaNwAAAAC0AAAAAQAAALQAAAABTWljcm9zb2Z0IFdpbmRvd3MgUGhvdG8gR2FsbGVyeSA2LjAuNjAwMS4xODAwMAAAMjAxMDoxMTowOSAxMToxNDowOAAAIYKaAAUAAAABAAACcoKdAAUAAAABAAACeogiAAMAAAABAAcAAIgnAAMAAAABAFAAAJAAAAcAAAAEMDIyMZADAAIAAAAUAAACgpAEAAIAAAAUAAAClpEBAAcAAAAEAQIDAJECAAUAAAABAAACqpIEAAoAAAABAAACspIFAAUAAAABAAACupIHAAMAAAABAAUAAJIIAAMAAAABAAAAAJIJAAMAAAABABAAAJIKAAUAAAABAAACwqAAAAcAAAAEMDEwMKABAAMAAAABAAEAAKACAAQAAAABAAAAGaADAAQAAAABAAAAE6IXAAMAAAABAAIAAKMAAAcAAAABAwAAAKMBAAcAAAABAQAAAKQBAAMAAAABAAAAAKQCAAMAAAABAAAAAKQDAAMAAAABAAAAAKQEAAUAAAABAAACyqQFAAMAAAABAFcAAKQGAAMAAAABAAIAAKQHAAMAAAABAAAAAKQIAAMAAAABAAAAAKQJAAMAAAABAAAAAKQKAAMAAAABAAAAAKQgAAIAAAAhAAAC0gAAAAAAAAABAAAA+gAAACkAAAAKMjAxMDoxMDoxOSAxMzo0Njo1NAAyMDEwOjEwOjE5IDEzOjQ2OjU0AAAAAAQAAAABAAAAIQAAADIAAABWAAAAGQAAAHcAAAAKAAAAAAAAAAExRjc2QjAyQjRDNTk0RTA4QkUwNzBERkMwMzBDNTkxNwAA/+EKoWh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8APD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS40LjAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtcDpDcmVhdGVEYXRlPSIyMDEwLTEwLTE5VDEzOjQ2OjU0IiB4bXA6TW9kaWZ5RGF0ZT0iMjAxMC0xMS0wOVQxMToxNDowOCIgeG1wOkNyZWF0b3JUb29sPSJNaWNyb3NvZnQgV2luZG93cyBQaG90byBHYWxsZXJ5IDYuMC42MDAxLjE4MDAwIiBwaG90b3Nob3A6RGF0ZUNyZWF0ZWQ9IjIwMTAtMTAtMTlUMTM6NDY6NTQiIHhtcE1NOkluc3RhbmNlSUQ9InV1aWQ6ZmFmNWJkZDUtYmEzZC0xMWRhLWFkMzEtZDMzZDc1MTgyZjFiIi8+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+ICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPD94cGFja2V0IGVuZD0idyI/PgD/7QB4UGhvdG9zaG9wIDMuMAA4QklNBAQAAAAAAD8cAVoAAxslRxwCAAACAAIcAj8ABjEzNDY1NBwCPgAIMjAxMDEwMTkcAjcACDIwMTAxMDE5HAI8AAYxMzQ2NTQAOEJJTQQlAAAAAAAQye3AFZi29doApqq9KO129v/AABEIABMAGQMBIgACEQEDEQH/xAAfAAABBQEBAQEBAQAAAAAAAAAAAQIDBAUGBwgJCgv/xAC1EAACAQMDAgQDBQUEBAAAAX0BAgMABBEFEiExQQYTUWEHInEUMoGRoQgjQrHBFVLR8CQzYnKCCQoWFxgZGiUmJygpKjQ1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4eLj5OXm5+jp6vHy8/T19vf4+fr/xAAfAQADAQEBAQEBAQEBAAAAAAAAAQIDBAUGBwgJCgv/xAC1EQACAQIEBAMEBwUEBAABAncAAQIDEQQFITEGEkFRB2FxEyIygQgUQpGhscEJIzNS8BVictEKFiQ04SXxFxgZGiYnKCkqNTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqCg4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2dri4+Tl5ufo6ery8/T19vf4+fr/2wBDAAQCAwMDAgQDAwMEBAQEBQkGBQUFBQsICAYJDQsNDQ0LDAwOEBQRDg8TDwwMEhgSExUWFxcXDhEZGxkWGhQWFxb/2wBDAQQEBAUFBQoGBgoWDwwPFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhb/3QAEAAL/2gAMAwEAAhEDEQA/APqq6+I9wisVSBRGMv1JH4Vzl98WNYaRmt7KVoi/yERkFl7n/PrXhfjHSPGiaVbx6eJ5ftDkStBdC3kUY+Uhg5+UHGcE9OnarMWpfFG10R7S4XQ9QkC/uprq5XzLY8gFWXY3556U4Z/l8UnJJ3+VjmqZLjJX5JvQ9I8SfE3xNCVu2jaCFhuC7gN2fRmIrkv+Fy6z/wA/T/8Af1P8a8N+MWhfEy6eG8t4JtYgdQrwC8WZrcgclTK/3Sc4wcjOK88/4Rr4if8AQiRfmn/x6vao5zlbgpKUPvS/NnBLJsbdp839eiP/0O/upH8iJdxA2HpVERJD8sYIBJBBYkYz71cuv9XF/uGq033h/vH+dfjrk7LU+/ilqUfENvbtbOPIiG4YO1Aufyrl/wCy9P8A+fZfzNdbr/8Ax7n8a56hTkr2Z10Ipx1R/9k="> 
	<img class="full-bg-image hidden" data-src="https://upload.wikimedia.org/wikipedia/commons/9/93/410_Paysage_arménien_sur_la_route_du_col_de_Selim.JPG">
	<canvas class="full-absolute progressive-img-load-canvas"></canvas>
	
	<!-- =============== -->

	<div class="center-content sample-background">
    <h3 class="center white">
      That's a nice background!
    </h3>
  </div>
</div>
.full-absolute {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	width: 100%;
	height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.progressive-img-load-canvas {
	-webkit-transition: opacity 1s;
	transition: opacity 1s; 
}
.full-loaded .progressive-img-load-canvas {
	opacity: 0;
}
.progressive-bg-image {
	background-position: center center;
	background-size: cover;
	position: relative;
}
.hidden {
	display: none;
  visibility: hidden;
}

/* ============ */
/* === Data === */
/* ============ */
.center-content {
  position: relative;
	display: table;
  text-align: center;
}

.center-content .center {
	display: table-cell;
  vertical-align: middle;
}

.sample-background {
	height: 300px;
	width: 100%;
}
.white {
  color: white;
}