Design comparison
Solution retrospective
need help in changing the image's colour
Community feedback
- @fidellimPosted about 3 years ago
Hi @arnavdoley,
Great job finishing the project! To answer your question, you can remove your img tag and do this instead:
.layer { background-color: hsl(277, 64%, 61%); background-image: url(/images/image-header-desktop.jpg); background-blend-mode: multiply; }
This will combine both color and image. Background-blend-mode: multiply will darken the color overlay.
I hope this helps :)
Marked as helpful1@webothdoPosted about 3 years ago@fidellim Thank you for this. I had the same problem but I was gonna hard code the size - this is better
0@arnavdoleyPosted about 3 years agoI will surely try this and may be it will also solve the responsiveness issue that Im having in mobile view. than @fidellim
0 - @argelomnesPosted about 3 years ago
Hi Arnav,
Nice work with the desktop design. I noticed that the background color is bleeding from the image in mobile. For changing the image's color, I suggest playing around with
mix-blend-mode
property.Marked as helpful1@arnavdoleyPosted about 3 years agoI will look into the issue. thanks for the help@argelomnes
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
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