jQuery Plugin For Creating Blurred Image Backgrounds - Background Blur

Background Blur is a lightweight and cross-browser jQuery plugin for creating a blurred background from a give image using SVG filters, with a fade in/out animation based on velocity.js or jQuery animate() method.

See also:

• jQuery Plugin To Blur An Element with SVG Fallback - blurme
• jQuery Plugin For Creating Blurred Background Image - Blurr
• jQuery Plugin To Blur Any Html Elements - vague.js
• Create Stunning Image Backgrounds With jQuery backgroundify.js

How to use it:

1. Create a set of elements that follows the following HTML structure:

<div class="container">
  <div class="content">
  ...
  </div>
</div>

2. Add the following css in the head section.

.container {
  overflow: hidden;
  width: 100%;
  position: relative;
}

.container .bg-blur-overlay {
  z-index: -1;
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSI0NiUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wOCIvPjxzdG9wIG9mZnNldD0iNTklIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMDgiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC45Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(46%, rgba(0, 0, 0, 0.08)), color-stop(59%, rgba(0, 0, 0, 0.08)), color-stop(100%, rgba(0, 0, 0, 0.9)));
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.08) 46%, rgba(0, 0, 0, 0.08) 59%, rgba(0, 0, 0, 0.9) 100%);
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.08) 46%, rgba(0, 0, 0, 0.08) 59%, rgba(0, 0, 0, 0.9) 100%);
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.08) 46%, rgba(0, 0, 0, 0.08) 59%, rgba(0, 0, 0, 0.9) 100%);
}

.container .bg-blur {
  z-index: -2;
  opacity: 0;
  position: absolute;
  width: 100%;
  min-height: 100%;
  height: auto;
  display: block;
  top: 0;
  left: 0;
}

.container .content { z-index: 1; }

3. Include jQuery library and the jQuery Background Blur plugin at the bottom of the web page.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="dist/background-blur.min.js"></script>

4. Include the OPTIONAL velocity.js for fade in/fade out animation when presenting background images.

<script src="velocity.min.js"></script>

5. Call the plugin on the container element to add a blurred background to it.

$('.container').backgroundBlur({

  // URL to the image that will be used for blurring
  imageURL : 'http://website.com/images/img.jpg',

  // Amount of blurrines 
  blurAmount : 10, 

  // CSS class that will be applied to the image and to the SVG element
  imageClass : 'bg-blur', 

  // CSS class of an element that will overlay the blur background (useful for additional effects)
  overlayClass : 'bg-blur-overlay', 

  // If the image needs to be faded in, how long that should take
  duration : 1000, 

  // Specify the final opacity that the image will have
  endOpacity : 0.6 
  
});

6. Available methods.

 // swap the image to another image while using initial settings for animation
 $('.container').backgroundBlur('string'); 

 // fade in
 $('.container').backgroundBlur('fadeIn'); 

 // fade out
 $('.container').backgroundBlur('fadeOut'); 

Change log:

2016-04-05

• JS update

2015-07-04

• Perfecting IE support

---

This awesome jQuery plugin is developed by msurguy. For more Advanced Usages, please check the demo page or visit the official website.