Perfect Match: Adaptive Backgrounds for jQuery Colors Your Website Automagically

This plugin for jQuery is gas. Adaptive Backgrounds by Brian Gonzalez analyzes the colors of the images in your website, determines which ones are dominant and colors the background of the element containing the image accordingly. As Adaptive Backgrounds works with the nearest parent by default, you can have multiple different backgrounds on the same page. The effect is impressive.

Adaptive Backgrounds for jQuery: Harmonious Color Palette on Auto-Pilot

Using Adaptive Backgrounds reminds me a little of Ambi-Light, a lighting installed behind your TV set, varying in color, controlled by the dominant color shown on screen. This is supposed to enhance your viewing experience. I didn't fall for this concept yet.

Adaptive Backgrounds extracts the dominant Green and colors the background accordingly

With websites this is a totally different thing, though I admit it will not work with each and every project. Adaptive Backgrounds reads your image, searches for the dominant color, extracts it and automatically colors the background of the image's parent element in that said color. Look at the demo page for some really impressive sights.

Bringing it into effect is absolutely simple and straight-forward. Once you've embedded jQuery and the script to your project, you call the functionality like so:

$(document).ready(function(){
  $.adaptiveBackground.run()
});

From now on, the script keeps looking for images carrying the data attribute data-adaptive-background. This attribute gets attached to your regular img:

Using a variable, say defaults you can further customize the behavior of the plugin. This is necessary as soon as you don't want to target the closest parent, which will per default be the predecessor in the DOM tree, or if you want to keep specific text colors. The variable then gets attached to the run command:

$.adaptiveBackground.run(defaults)

As the plugin works with canvas and ImageData, it is only able to process images hosted on the same domain the script is. There are workarounds to change this, though. In addition to the processing of your everyday img Adaptive Backgrounds is also able to work with CSS background images. You'll use the additional data attribute data-ab-css-background to achieve that:

Images you don't want to get processed, simply will not be equipped with the data attribute. Could you imagine an easier way?

Related Links

• Adaptive Backgrounds | Demo
• Adaptive Backgrounds | Github