Design comparison
Solution retrospective
How can you overlay the accent color on the image? My problem is that the image is not showing when view it on mobile view.
Community feedback
- @danielmrz-devPosted 9 months ago
Hey @rikku08!
Your project looks great!
I also had a hard time trying the image coloring when I did this project, but I managed to do it like this:
.image { background-image: linear-gradient(0deg, #7210af9c, #7210af9c), url('images/image-header-mobile.jpg'); background-size: cover; height: 240px; }
There's also another option using a property called background-blend-mode, but I confess I don't know how to use it very well. I'm mentioning it because you might wanna look into it. 😊
Hope it helps!
Other than that, your project looks fantastic!
Marked as helpful0@rikku08Posted 9 months ago@danielmrz-dev Thank you. Thank you for this code that you have provided, I will definitely try it. I will have a look into background-blend-mode and see how it works and how to apply it on this project.
1 - @jcboteroPosted 9 months ago
Hi rikku08!. Nice code!. If you don't mind I would like to make a suggestion. I think you forgot to do the background effect to the main image. You can achieve this in your css sheet like this:
.img { mix-blend-mode: multiply; opacity: 0.8; }
In this way, the image achieves the violet color that the challenge asks us for.
If you think this helped you, please mark the comment as helpful. Thank you!
Marked as helpful0@rikku08Posted 9 months ago@jcbotero Yes, it is not working for me. I'm trying it out again and will upload the updated version of this challenge. Thanks for your suggestion, will definitely try this code.
0 - @IzykGitPosted 9 months ago
A way you can change the color of the image in CSS is by using the filter attribute. This allows you to change things like the hue, saturation, contrast, etc.
1@rikku08Posted 9 months ago@IzykGit Thank you, will have a look into that attribute and use it.
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