Stats Preview Card Component (Solution)

Another option is to use the linear gradient function.

This is what I did:

.imageContainer{ background: linear-gradient(0deg, hsl(277, 64%, 61%, 0.5) 1%, hsl(277, 64%, 61%, 0.5) 100%), url(images/image-header-desktop.jpg); }

Hello, In CSS You could try setting the background color to the container that the image is in. Then, add the mix-blend mode to your image in CSS and set it to multiply and adjust the opacity.

.image-container{
background-color: hsl(277, 64%, 61%);
}
img{
mix-blend-mode: multiply;
opacity: 0.75;
}