Adding a semi-transparent, solid bg color over a jpeg

Question

I have an <img> tag that I am using as a background image, but I want to have a semi-transparent, solid background color, that still shows the original image, at the same ratio and size, under the background color. Here is some of my code (if you need any more info, please ask. Also, the JS and CSS is all inline, and I use jQuery 3.6.0):

<div class="home-screen">
  <img class="background" alt="Background Image" src="./assets/images/Desktop_Pictures/Catalina-min.jpg" />
</div>

div.home-screen {
  height: 100%;
  overflow: hidden;
}

div.home-screen img.background {
  top: -50%;
  margin-left: 0;
  transform: translateX(0);
  width: 100%;
  position: fixed;
}

var isLaunchpadOpen = false;

function openLaunchpad() {
    if (isLaunchpadOpen == false) {
        $("div.home-screen").css("background-color", "rgb(211, 211, 211)").css("background-origin", "content-box").css("top", 0).css("position", "fixed");

        $("div.home-screen img.background").css("background-blend-mode", "multiply").css("filter", "opacity(50%)");

        isLaunchpadOpen = true;
    } else if (isLaunchpadOpen == true) {
        $("div.home-screen img.background").css("background-color", "none").css("filter", "opacity(100%)").css("background-blend-mode", "normal");

        isLaunchpadOpen = false;
    }
}

Note, this is not all the code, this is only the code that I assume is causing the problem

Answer 1

You can use the CSS filter property opacity

img {
 filter:opacity(50%);
}

in this case i recommend you use the css filter property if you want to know more about the css filter property i recommend you check this examples:

I hope I've helped;) css filter property

Answer 2

1. Apply position: relative; to the wrapper of the image: .home-screen { psotion: relative; } .home-screen { psotion: relative; }
   
2. Create a pseude-element with ::after that spans the entire wrapper: .home-screen::after { display: block; content: ""; position: absolute; inset: 0; .home-screen::after { display: block; content: ""; position: absolute; inset: 0;
   
3. Apply a semi-transparent background-color to the pseudo-element by using a rgba color as value.

 .home-screen { position: relative; }.home-screen::after { content: ""; display: block; position: absolute; inset: 0; background-color: rgba(0, 0, 255, 0.5); } /* for styling purpose only */ img { width: 100%; }

 <div class="home-screen"> <img class="background" alt="Background Image" src="https://www.tacoshy.de/Images/Yoshi/IMAG0735.jpg" /> </div>