Create Stunning Image Backgrounds With jQuery backgroundify.js

A tiny and easy-to-use jQuery plugin that enables you to create stunning image backgrounds by utilizing a blurred version of the image or extracting the dominant color to set as the parent container's background.

The plugin was designed to resolve irregular whitespace issues when image sizes do not match their parent containers. It automatically adjusts the image background to fit the parent container perfectly, eliminating unsightly gaps and ensuring a cohesive visual appearance. 

See Also:

• jQuery Plugin To Extract The Dominant Color of An Image - Primarycolor.js
• Javascript Plugin For Adaptive Image Background Color – Adaptive Backgrounds
• Create Blurred Image Background Using jQuery And Canvas - blurIt

How to use it:

1. Download and put the backgroundify.min.js script after jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/backgroundify.min.js"></script>

2. Call the plugin on the target image.

<div class="image-wrapper">
  <img src="1.jpg" class="demo">
</div>

// use blured image
$('.demo').backgroundify({
  type: 'blur'
  radius: 10, 
  saturation: 0.5
});

// use dominant color
$('.demo').backgroundify({
  type: 'dominant',
  border: 0.1 //
});

3. Note that the parent container shouldn't be STATIC positioned.

.image-wrapper {
  position: relative;
}

---

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