on this page i have the first div as a dark image and the second as a light background.

i want the sidebar text color to be light on the dark image and dark on the light.

how would i set the color according to what div is in the background? just need it for two color options.

this is another example of what I'm looking for / example html:

 <div id="home_wrapper">
    <div id="home_top_t_wrap"> <!-- DARK BACKGROUND -->
        <h1 class="top_text_h1"> Shop New York Like Never Before </h1> <!-- TEXT THAT NEEDS TO GO FROM LIGHT TO DARK -->    </div>
    <div id="the_market_container"> <!-- LIGHT BACKGROUND --></div>
 </div>

on this page i have the first div as a dark image and the second as a light background.

i want the sidebar text color to be light on the dark image and dark on the light.

how would i set the color according to what div is in the background? just need it for two color options.

this is another example of what I'm looking for http://www.acnestudios.com/ example html:

 <div id="home_wrapper">
    <div id="home_top_t_wrap"> <!-- DARK BACKGROUND -->
        <h1 class="top_text_h1"> Shop New York Like Never Before </h1> <!-- TEXT THAT NEEDS TO GO FROM LIGHT TO DARK -->    </div>
    <div id="the_market_container"> <!-- LIGHT BACKGROUND --></div>
 </div>

• javascript
• jquery
• html
• css

• 2 To answer this question, you realistically need to show enough of your HTML and CSS to allow us to recreate your problem. A link to your page is not sufficient, because as soon as your problem is solved that page will be changed rendering the question useless or nonsensical to future visitors to the site. – David Thomas Commented Oct 4, 2015 at 4:52
• Possible duplicate of Change text color based on brightness of the covered background area? – KyleMit ♦ Commented May 1, 2017 at 14:05

3 Answers 3

I like use this plugin http://aerolab.github.io/midnight.js/ you can try it

One way to adjust the color of text based on the color of the background is with background-check.

From the github page:

Automatically switch to a darker or a lighter version of an element depending on the brightness of images behind it.

Here are a few other options:

• Is it possible to change text color based on background color using css?
• Change text color based on brightness of the covered background area?
• Dynamically adjust text color based on background image
• Invert CSS font-color depending on background-color

UPDATE

Check out the sidebar on this website: http://provisions.convoy.nyc/

A clean, smooth color transition for the text based on the background image or color.

I spoke with the designer. They use: http://aerolab.github.io/midnight.js

<div id="home_wrapper">
    <div id="home_top_t_wrap"> <!-- DARK BACKGROUND -->
        <h1 class="top_text_h1"> Shop New York Like Never Before </h1> <!-- TEXT THAT NEEDS TO GO FROM LIGHT TO DARK -->    </div>
    <div id="the_market_container"> <!-- LIGHT BACKGROUND --></div>
 </div>


    <script>

    $(document).ready(function() {
        $("#home_top_t_wrap").hover(function() {
            $("body").css("background-color","light"); //change light to your color
        });
    $("#the_market_container").hover(function() {
            $("body").css("background-color","dark"); //change dark to your color
        });

    });
    </script>

I tried on div hover. Hope this helps