Clever Geek Handbook

Change background color based on website background color

I'm trying to achieve a similar effect in the example below, where the site logo and menu icon change based on the background behind each element.

http://www.borngroup.com/work/dkny/

It looks like the change is done via javascript for each element's background color, but I can't figure out how this is achieved.

Any help would be greatly appreciated!

+3


source to share


1 answer


I don't know if this is what the born group does, but you can achieve this effect using only css with background images and background anchors: fixed.

Here's a quick demo .



body {
    height: 1000px;
}   

#one {
    background-color:black;
    background-image: url('http://d.pr/i/18pT3+');
    background-attachment: fixed;
    background-repeat: no-repeat;
    height:100px;
}

#two {
    background-color:yellow;
    background-image: url('http://d.pr/i/1capU+');
    background-attachment: fixed;
    background-repeat: no-repeat;   
    height:100px;
}
+1


source






More articles:


All Articles