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
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
position: relative; to the wrapper of the image: .home-screen { psotion: relative; }::after that spans the entire wrapper: .home-screen::after { display: block; content: ""; position: absolute; inset: 0;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>