---
layout: default
title: jquery.adaptive-backgrounds.js • A jQuery plugin for extracting dominant colors from images and applying it to its parent 
---


<div class='image-wrapper slow'>
  <div class='inner'>
    <span class='color'>
      <span class='swatch'></span>
    </span>
    <img src="img/main-images/1.jpg" data-adaptive-background='1' data-description='grandpa'>
  </div>
</div>

<div class='image-wrapper'>
  <div class='inner'>
    <span class='color'>
      <span class='swatch'></span>
    </span>
    <img src="img/main-images/2.jpg" data-adaptive-background='1'>
  </div>
</div>

<div class='image-wrapper'>
  <div class='inner'>
    <span class='color'>
      <span class='swatch'></span>
    </span>
    <img src="img/main-images/3.jpg" data-adaptive-background='1' data-description='boy'>
  </div>
</div>

<div class='image-wrapper'>
  <div class='inner'>
    <span class='color'>
      <span class='swatch'></span>
    </span>
    <img src="img/main-images/4.jpg" data-adaptive-background='1'>
  </div>
</div>

<div class='image-wrapper'>
  <div class='inner'>
    <span class='color'>
      <span class='swatch'></span>
    </span>
    <img src="img/main-images/5.jpg" data-adaptive-background='1'>
  </div>
</div>

<div class='image-wrapper'>
  <div class='inner'>
    <span class='color'>
      <span class='swatch'></span>
    </span>
    <img src="img/main-images/6.jpg" data-adaptive-background='1'>
  </div>
</div>