html, css

This was hard for me. I tried. However, I have got a few questions. It would be really kind of you guys if you help me with it.

1. The image in black and white and I have to use a color over it. so the image with black and white has shade of color on it. I saw the overlay method, linear gradient. . Finally I applied it but I think there is something wrong with my code. Mine is not coming similar to the original design.

2. I have done the overlaying thing, but when I am increasing the resolution, that overlay div changes position , so it's not fixed over the image.

3. Now coming back to the color thing, given is hsl format, linear gradient works better with rgba. So, I thought of converting hsl to rgb, but I was not satisfied, so kept hsl, and used opacity with it. But I still couldn't come close to the given picture in the design.

That's all , Thank you