Create Blurred Image Background Using jQuery And Canvas - blurIt

blurIt is a jQuery plugin for blurring image that loads a specified image onto an HTML5 canvas, blurs it and then uses the blurred image as a background on your webpage.

See also:

• jQuery Plugin For Creating Blurred Image Backgrounds - Background Blur
• jQuery Plugin For Creating Blurred Background Image - Blurr
• Create Stunning Image Backgrounds With jQuery backgroundify.js

How to use it:

1. Create a container as the background of your webpage.

<div id="backgroud_div"></div>

#backgroud_div {
  position: absolute;
  left: 0px;
  top: 0px;
  height: 100%;
  width: 100%;
  background-color: #eee;
  z-index: 1;
}

2. Insert the source image into your webpage.

<img id="image_source" src="demo.jpg">

3. Load jQuery library and the jQuery blurIt plugin's JavaScript at the end of the webpage.

<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="js/blurIt.js"></script>

4. Call the plugin on the target container and pass the 'source image' and 'radius' parameters to the blurIt method.

$("#backgroud_div").blurIt( $("#image_source") , 10 );

---

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