Mobile first card component using Flexbox and BEM

Solution retrospective
Is there a better way to blend a background color with an image? I blended a linear gradient with the background image. Is there a better way I could have done this using a simple background color and background image? Maybe with the single background shorthand property?
Please log in to post a comment
Log in with GitHubCommunity feedback
- @markup-mitchell
"I blended a linear gradient with the background image. Is there a better way I could have done this using a simple background color and background image?"
That's an interesting solution! The image contrast is lower in the design, is the only slight difference I can see, and the use of a linear gradient from and to the same value looks confusing at first...
Your solution works because gradients and images occupy the same background "space". As you suggest,
background-color
andbackground-image
live in different layers so you could set:background-image: url('../path/to/image.jpg'); background-color: var(--accent-color);
The visual effect is the same, but IMO the code's a bit more explicit and readable.
To reduce the contrast of the image
mix-blend-mode
with theexclusion
orlighten
values get you into the neighbourhood, although you might then need to tweak the color value for a closer visual match.Marked as helpful - P@kens-visuals
Hey @gchristofferson 👋🏻
I just have a quick tip to help you fix the accessibility issue.
- <div class="attribution">...</div> should be <footer class="attribution">...</footer>. These will fix the accessibility issue. Don't forget to generate a new repot after you fix it.
- Also a bonus tip 😃 add
background-color: var(--main-background);
in body, so it covers the whole screen for all screen sizes.
I hope this was helpful 👨🏻💻 you did a pixel perfect job, keep it up. Cheers 👾
Marked as helpful - @hardy333
Your background needs to be full size of the body element
- @markup-mitchell
👍 you're welcome 🙂
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