Jan 30 2014

Perfect Match: Adaptive Backgrounds for jQuery Colors Your Website Automagically

Advertisement

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_LP

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_EXPL

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:

1
2
3
$(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:

1
<img src="/image.jpg" data-adaptive-background='1'/>

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:

1
$.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:

1
<div style='background-image: url(/some-image.jpg)' data-adaptive-background='1' data-ab-css-background='1'></div>

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
About the Author

Dieter Petereit is Noupe's Editor-In-Chief and a veteran of the web with over 25 years of experience in the world of IT. As soon as Netscape became available he started to do what already at that time was called webdesign and has carried on ever since. Almost a decade ago he started writing for several online publications, some well, some lesser known. Dieter is a heavy G-Plusser, so why not meet him over there?

Homepage

Comments and Discussions
  • Erick, 05 February 2014

    Still can’t get this to work for some reason

  • TestShoot, 06 February 2014

    Interesting concept, I’ll have to tinker with this. I’d like to have a little more control over the BG.

Leave a Reply

Comments are moderated - and rel="nofollow" is in use. Please no link dropping, no keywords or domains as names; do not spam, and do not advertise!

comments form
search form
 
image description image description