Adaptive-Background : apply predominant color from image

Published on 09 mai 2014

Just wanted to share this small tool developped by Brian Gonzalez, because it’s pretty cool and useful: http://briangonzalez.github.io/jquery.adaptive-backgrounds.js/ .

The extraction of the predominant color is done by looping through each pixel of the image, and creating an associative array where the keys are the RGB strings and the value the count of occurences of the color. The down side for this process is that it can be a bit long for large images…

I stumbled upon it a few months ago, but never used it until my last post. My body background being an image, if my posts are too long I get an awful white background at the end of the image:background-fail

Felt like a good opportunity to test adaptive-background.

For some reason the snippet to add to the page, won’t work when added to the footer/header template of the theme so I added it directly in the post:

<script src="..js/jquery.adaptive-backgrounds.js"></script>
<script>
    jQuery(document).ready(function($){
          $.adaptiveBackground.run()
        });

</script>

Works great, I’m keeping this in mind for a next (better) use… I did finally change the css property of my body background :roll:

 

comments powered by Disqus