Design comparison
SolutionDesign
Community feedback
- @0xabdulkhaliqPosted over 1 year ago
Hello there π. Congratulations on successfully completing the challenge! π
- I have other recommendations regarding your code that I believe will be of great interest to you.
BACKGROUND iMAGE πΈ:
- Looks like the background svg has been properly set using
:before
, Actually we can easily tackle this problem without using:before
.
- So let me share my css snippet which helps you to easily apply the
background color
with thebackground svg
they provided to place perfectly as same as design.
- Add the following style rule to your css, and then experience the changes
body { background: url(./images/pattern-background-desktop.svg) no-repeat, #E1E9Ff; background-size: contain; }
- Now you can remove the following style rules
body::before { content: ""; position: absolute; background-image: url(/images/desktop/pattern-background-desktop.svg); background-repeat: no-repeat; background-size: contain; width: 100%; height: 100%; z-index: -1; }
- Tip, Don't forget to generate a new screenshot after editing the
css
file
.
I hope you find this helpful π Above all, the solution you submitted is great !
Happy coding!
Marked as helpful1 - @LoaiEsam37Posted over 1 year ago
Wow, you're a coding wizard! Your solution is so elegant and efficient. Keep going !!!
Marked as helpful1
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