Create Stunning Image Backgrounds With jQuery backgroundify.js

File Size: 225 KB
Views Total: 250
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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:

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">
// use blured image
  type: 'blur'
  radius: 10, 
  saturation: 0.5

// use dominant color
  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.