CSS in React. Can't darken background-image

Question

I have the problem with my background-image on my website (React.js). I want to darken the background-image and this darkening does not work. I tried Darken CSS background image? and this doesn't work. I am testing in the newest version of Google Chrome browser. Here is my code:

* {
    margin: 0;
    padding: 0;
}

body{
    background: url("images/background.jpg");
}

header{
    position: absolute;
    width: 100%;
    height: 5vh;
}

ul{
    position: absolute;
    display: inline-block;
    left: 10vw;
    top: 2vh;
    list-style-type: none;
}

.link{
    text-decoration: none;
    color: white;
}

Answer 1

I don't believe you're actually applying any kind of color grading to your background to darken it. If I understand the question correctly, it appears that you have an image as a background, and you wish to darken that image.

You should be able to do this with:

 body{
 background:
        /* top, transparent black, faked with gradient */ 
        linear-gradient(
          rgba(0, 0, 0, 0.7), 
          rgba(0, 0, 0, 0.7)
        ),
        /* bottom, image */
        url(https://images.unsplash.com/photo-1614030424754-24d0eebd46b2);
    }

This should enable the darkening of a background. If you'd like it to only darken on certain divs, then you can simply apply the same style and or image effect to a div class that you specify.

e.g.

<div class="background-image"></div>

.background-image {
 background:
        /* top, transparent black, faked with gradient */ 
        linear-gradient(
          rgba(0, 0, 0, 0.7), 
          rgba(0, 0, 0, 0.7)
        ),
        /* bottom, image */
        url(https://images.unsplash.com/photo-1614030424754-24d0eebd46b2);
    }