I can now overlay my background image with colors and effects, thanks to the community for the response.
@AbbyNyakara
Posted
use the css filter property to add the opacity. This was how i did mine
img{ filter: opacity(35%) drop-shadow(0 0 hsl(277, 64%, 61%)); }
Marked as helpful
@Auto-Yahwin
Posted
@AbigaelN2021 thanks for the response. I haven't used drop-shadow before. I'll look it up to fully understand, then apply it to my project.
@darryncodes
Posted
Hi Solomon,
linear-gradient to a background image: background-image: linear-gradient(hsl(277, 64%, 61%), hsl(277, 64%, 61%) ), url(../your/image-filepath); this will help achieve the purple colour to match the design, rather than the overlay approachbackground-blend-mode. (multiply usually does the trick)Good luck!
Marked as helpful
@Auto-Yahwin
Posted
@darryncodes, is there any way I can reduce the opacity of the color assuming am using the first approach (I.e the linear-gradient method)?
@darryncodes
Posted
I think your best bet @Auto-Yahwin would be to use filter. You can create a lot of affects with background-blend-mode too.
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord
