search

kennethcachia / background-check

Automatically switch to a darker or a lighter version of an element depending on the brightness of images behind it.
http://kennethcachia.com/background-check/
MIT License
3.27k stars 282 forks source link

Script Doesnt Work on Elements w/ Background-image Property #81

Closed cupcakedream closed 8 years ago

cupcakedream commented 8 years ago

Hi - I cant get your script to work. II'm trying to run the below HTML doc, but no classes are added to the ".target" element based on the background image of the body element. Tested in FF, Safari, & Chrome.

<html><head>

    <script src="http://local-url/background-check.min.js"></script>

    <style>

        body {background:url('http://local-url/2.jpg');}

        .target {background:blue;position:absolute;width:60px;height:60px;}

        .background--dark   {background:white;}
        .background--light {background:black;}

    </style></head>

  <body>

    <div class="icon target"></div>

    <script>
      document.addEventListener('DOMContentLoaded', function () {
          BackgroundCheck.init({
            targets: '.target'
          });
        });
    </script>

</body></html>
cupcakedream commented 8 years ago

There is no issue - I mistakenly thought the this script would detect background-image properties by default but it's actually a specific configuration (described in the github readme):

BackgroundCheck.init({
  targets: '.target',
  images: '.thumbnail'
});

It would be great to see this clarified on your project page - I figure this would be a very very common assumption. It was frustrating to blow a couple hours to figure it out.

And... Thanks for writing this plugin!

Mike