When showcasing something on the Web, some developers often find a hard time deciding which backgrounds is most suitable for use. A good combination of the background with the right content can affect the user experience substantially. For some designers, they prefer to use some of the dominant colors inside the content itself – AdaptiveBackgrounds.js can do that for you automatically.
AdaptiveBackgrounds.js is a free jQuery plugin that helps you easily adapt the most dominating color in your content as part of the background. It was built on top of RGBaster, made by the same developer.
Recommended Reading: Practical Approach To Choosing Website Color Scheme
Basically, it’s a plugin to extract the color palette of an image to get to the dominant color. The first time the page loads, the plugin will extract the color from the image. The extracted color is then applied to the image parent. You can see how it works in this gif.
AdaptiveBackgrounds.js requires jQuery library to work. Although it’s built on top of RGBaster, you don’t need to include it anymore. You can get the plugin file from its GitHub page.
Then include all the required files to your project like so:
Adapt Dominant Color
In order for the dominant color to be applied into an element, you should put the image as the child of it. Inside the
img tag, give the
data-adaptive-background attribute, like so, so that the script can get the color:
<div class='wrapper'> <img id="img" src="images/double-arch.jpg" data-adaptive-background='1'> </div>
If you directly put the
img on the
body, then all of the body will be applied with the dominant color.
And so we’ve got the dominant color applied to the image.
For more examples and additional settings, you can visit the AdaptiveBackgrounds.js documentation page.
With AdaptiveBackgrounds.js, you will get only a static color. You might want to try give your background a little more color for an attention-grabbing result. If you do, check out the AdaptiveBackgrounds.js demo page for more ideas.