Stats preview card component

Hi Jax, could you use background-size: cover with width and height set to 100% and then set the responsive width and height that you want in a parent container (as in, the div with the background image would be contained within an image container)?

You can also try a picture element instead of background image, since you can include images of different sizes along with the media query you want them shown at:

<picture>
    <source media="(min-width: 960px)" srcset="image-desktop.png" />
    <img src="image-mobile.png" alt="perfume bottle" />
</picture>

Hope this helps!

Hello Jax, congratulations for you new solution.

I agree with 100% of the things my friend Elaine said. In addition you can also match the exact overlay effect for this challenge using mix-blend-mode.

Here's how, see the code below:

Img {
Mix-blend-mode:multiply;
Opacity: .8;
}

If you want too boost the page loading you can use the tool called minify to reduce the css sheet, there's also a plugin im VScode thst does this work.

Hope it helps, happy coding. 👏