jQuery Plugin For Adaptive Image Background Color

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

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">

4. Available options.

<script type="text/javascript">
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. 

Change log:


  • Shade variation


  • Add support for Picture element


  • added in success callback w/ demo & docs


  • allow for explictly declaring which colors to exclude


  • Adjusted Order of Precedence for Parent


  • added luminance classes to parent


  • 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.