JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Test of coderwall background effect</title>
    <meta charset="utf-8">
</head>
<body class="body-bg">
    <canvas class="blur" src="https://d3levm2kxut31z.cloudfront.net/assets/locations/Mexico-1c39f581666a50a97c5130e13837ff20.jpg" width="300" height="200"></canvas>    
</body>
</html>

CSS

.blur {
  min-width: 100%;
  min-height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -2;
  opacity: 0.7;
}

JavaScript

var CanvasImage=function(e,t)
{
	this.image=t,
	this.element=e,
	this.element.width=this.image.width,
	this.element.height=this.image.height;
	var n=navigator.userAgent.toLowerCase().indexOf("chrome")>-1,
	r=navigator.appVersion.indexOf("Mac")>-1;
	n&&r&&(this.element.width=Math.min(this.element.width,300),this.element.height=Math.min(this.element.height,200)),
	this.context=this.element.getContext("2d"),
	this.context.drawImage(this.image,0,0)
};
CanvasImage.prototype={
	blur:function(e){
		this.context.globalAlpha=.5;
		for(var t=-e;t<=e;t+=2)
			for(var n=-e;n<=e;n+=2)
				this.context.drawImage(this.element,n,t),
			n>=0&&t>=0&&this.context.drawImage(this.element,-(n-1),-(t-1));
			this.context.globalAlpha=1
		}
},

$(function(){
	var image,canvasImage,canvas;
	$(".blur").each(function(){
		canvas=this,
		image=new Image,
		image.onload=function(){
			canvasImage=new CanvasImage(canvas,this),
			canvasImage.blur(4)
		},
		image.src=$(this).attr("src");
	});
});