jQuery Plugin For Adaptive Image Background Color

Adaptive Background is a canvas based jQuery plugin used to fill the background with the dominant color of a given image. By default, the color is applied to the parent one level up the DOM tree. Helpful for making your website more beautiful and interesting.

See also:

• jQuery Plugin For Grabbing Image Color - imgcolr
• Create Stunning Image Backgrounds With jQuery backgroundify.js

Basic Usage:

1. Include the jQuery javascript library and jQuery Adaptive Background plugin in the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src='../src/jquery.adaptive-background.js'></script>

2. Insert an image with data-adaptive-background attribute in your page.

<img id="img" src="images/1.jpg" data-adaptive-background="1">

3. Fire the plugin.

<script type="text/javascript">
$(document).ready(function(){
$.adaptiveBackground.run()
});
</script>

4. Available options.

<script type="text/javascript">
$(document).ready(function(){
var opts = {
selector: 'img[data-adaptive-background="1"]', // a CSS selector which denotes which images to grab/process
parent: null // a CSS selector which denotes which parent to apply the background color to. 
}
$.adaptiveBackground.run(opts)
});
</script>

Change log:

2017-07-21

• Shade variation

2017-06-08

• Add support for Picture element

2014-08-21

• added in success callback w/ demo & docs

2014-06-24

• allow for explictly declaring which colors to exclude

2014-05-02

• Adjusted Order of Precedence for Parent

2014-01-23

• added luminance classes to parent

2014-01-15

• adding in functionality for acquiring dominant color of background image

---

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