Stats Website using Html and CSS

You can also do that by setting another div* to position: absolute; over the image.

*The div should have a transparency value like rgba()

I didn' check your code but I think I can help you.

Hope this helps :)

1. To display the overlay you just need <div class="img"></div> without an img tag.

2. In CSS you set the width and height of the container

3. You have to set the background property (NOT background-image) to the url() of the image and following the url specify the color, like this: background: url(/images/image-header-desktop.jpg), rgb(91, 46, 119);

4. Here the intersting part. There is a property in css called background-blend-mode, it contains many values but we are intersted in the overlay value, like this : background-blend-mode: overlay;

HTML

<div class="img"></div>

CSS

.img {
    width: 460px;
    background: url(/images/image-header-desktop.jpg), rgb(91, 46, 119);
    background-blend-mode: overlay;
    background-repeat: no-repeat;
    background-size: 100%;
}

Hey Aaryan. You could try using mix-blend-mode property. Search about it.