Design comparison
SolutionDesign
Solution retrospective
I built image layout this way:
<div class="banner"></div>.banner{ position: relative; background-image: url('./images/image-header-desktop.jpg'); background-size: cover; background-color: var(--Soft-violet); background-blend-mode:hard-light; } .banner::before{ content: ''; position: absolute; width: 100%; height: 100%; background-color: var(--Dark-desaturated-blue); opacity: 0.5; }
Any better ways to make this image layout design would be appreciable. :)
Community feedback
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