How do I add color and transparency to an image?

Question

I set a background image.

<div className="home">
     <h1>Home page</h1>
     <p className="home-text"> Text </p>
</div>

.home{
    background-image: url('../assets/home.jpg');
    background-size: cover;
    height: 100vh;
    opacity: 0.7;
    background-color: #006db5;
    color: rgb(241, 241, 241);
    
}

.home-text{
  
  color: #fdfdfd;
  
}

I want to make this background transparent blue and white text on top. But for some reason, the color does not change, and the white text fades along with the background. Now the color is not applied to the picture. How to set the transparency correctly so that the color is applied?

When you add background color it usually goes behind a background image element. So in this case we end up only seeing the image. I would make another div containing everything to put the color on then the one you currently have can still have the image — JDawwgy, Oct 03 '22 at 16:47
The opacity is affecting the background color as well, because they're both on the same element. You'll want to stack two DOM nodes atop each other, put the background color on z-index `n` and the image with reduced opacity on z-index `n+1` — Daniel Beck, Oct 03 '22 at 17:14

score 0 · Answer 1 · answered Oct 03 '22 at 17:18

You can use a pseudo element to create the overlay.

.testclass {
  background-image: url("../img/img.jpg");
  position: relative;
}
.testclass:before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 0; bottom: 0;
  background: rgba(0,0,0,.5);
}

Also background-image takes multiple values.

so a combination of just 1 color linear-gradient and css blend modes will do the trick.

.testclass {
    background-image: url("../images/image.jpg"), linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5));
    background-blend-mode: overlay;
}

How do I add color and transparency to an image?

1 Answers1