Design comparison
Solution retrospective
the background image part was tricky especially for mobile design. i used multiple breakpoints for the background-image size and used 'rem' unit to give it height. it's not perfect according to the design but I think I have made a descent job.
I heartily invite you all to take a look. I'll will be glad to discuss with you guys how I approached this challenge.
Community feedback
- @asifm37Posted over 3 years ago
Hi spyder,
Yes, the background image section was a bit tricky for me too. I used the image as the foreground with 80% opacity and added a color background, which worked for me.
Another approach I recently figured out was to use image and add filter option in CSS, this eliminates background logic completely.
Give these a try maybe.
Happy Coding. -Asif M
1@ratan17Posted over 3 years ago@asifm37 i just checked out 'filter' property on MDN. will surely try it out.. really thanks Asif bhai :)
0@thomashertogPosted over 3 years ago@ratan17 you might want to look into mix-blend-mode or background-blend-mode as well
1@ratan17Posted over 3 years ago@thomashertog yes thomas i have used background-blend-mode property to get the required effect for the image
0
Please log in to post a comment
Log in with GitHub
Join 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