Design comparison
SolutionDesign
Community feedback
- @hitmorecodePosted over 1 year ago
The images for desktop and mobile are not showing. That's because the image path is not correct.
.image-col { position: relative; background-image: url(images/image-header-desktop.jpg); /* change to this */ background-size: cover; background-position: center; background-repeat: no-repeat; } .image-col::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: hsl(276, 55%, 38%); opacity: 0.75; /* play with the opacity until you get what you want */ mix-blend-mode: multiply; /* add this line to blend the overlay and the image */ }
Marked as helpful0
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