Javascript Plugin For Adaptive Image Background Color – Adaptive Backgrounds

Adaptive Backgrounds is a standalone javascript plugin combined with RGBaster.js that allows to extract the dominant color from an image and apply it to the background of its parent element. Without having to include jQuery library. Adaptive Backgrounds plugin will scan your HTML for all images with the data-adaptive-background attribute and apply it’s dominant color to the image’s parent element’s background.

Basic Usage:

Create a container and insert an image with the data-adaptive-background attribute in it.

<div class="imgWrap"> 
<img class="center" src="1.jpg" data-adaptive-background="1" /> 
</div>

Include adaptive-backgrounds.js script at the end of your html document.

<script type="text/javascript" src="adaptive-backgrounds.js"></script>

Call the function and you’re done.

<script type="text/javascript">
AdaptiveBackgrounds();
</script>