@correlucas
Posted
👾Hello Kalhara, congratulations for your new solution!
Answering your question:
To make your hero image have the same look and the color purple overlay, you need to use mix-blend-mode
using the multiply
one.The mix-blend-mode CSS property sets how an element's content should blend with the content of the element's parent and the element's background.
Here’s how you can add this to your img
selector:
img { mix-blend-mode: multiply; opacity: 84%;}
Here's a good article explaining these effects with mix-blend-mode: https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode
✌️ I hope this helps you and happy coding!
@Impodays
Posted
@correlucas what is the best way to add image? add as a background in css file or add image in html file ?
@correlucas
Posted
@Impodays if the image it's just to decorate the page you can use it as background in the css, but if is something important like a product or anything related for a brand it's better img/picture because it's lmore likely to be found in search mechanism and also improve the SEO.