Install this plugin with Bower:

bower install background-blur

Or manually:

<script src="jquery.min.js"></script> <script src="background-blur.min.js"></script>

Create a container which will contain the blurred image:

<div id='some-element'></div>

Then create a blurred image in that container:

$('#some-element').backgroundBlur({ imageURL : 'http://URL-of-the-image', blurAmount : 50, imageClass : 'bg-blur' });

OR Create a blurred image and fade it in:

$('#some-element').backgroundBlur({ imageURL : 'http://URL-of-the-image', blurAmount : 50, imageClass : 'bg-blur' duration: 1000, // If the image needs to be faded in, how long that should take endOpacity : 1 // Specify the final opacity that the image will have });

OR Create a blurred image, fade it in and switch to another image:

// Initialize the blur $('#some-element').backgroundBlur({ imageURL : 'http://URL-of-the-image', blurAmount : 50, imageClass : 'bg-blur' duration: 1000, // If the image needs to be faded in, how long that should take endOpacity : 1 // Specify the final opacity that the image will have }); //Switch the image $('#some-element').backgroundBlur('http://URL-of-another-image');