Design comparison
Solution retrospective
I had trouble implementing box-shadows
and centering the background image.
I tried looking online but it seems that the background image has something to do with it and the settings of the surrounding divs
Community feedback
- @correlucasPosted about 2 years ago
👾Hello @mpgithubcode, Congratulations on completing this challenge!
Here’s some tips to improve your solution code:
- There is a best way to add this background and have more control over it. First of all add the image as a background inside the
body
this is the code for that:background-image: url(/images/pattern-background-desktop.svg);
Then you add
background-repeat: no-repeat
to avoid the background repeating andbackground-size: contain
to make it fit full width and center with the card this is the best choice, but an alternative to resize it is to usebackground-size: 125%
,body { background-size: contain; background-image: url(/images/pattern-background-desktop.svg); background-repeat: no-repeat; }
- To create box-shadows without writing the code you can use Figma and create the shadow design or use an online tool to create the shadow and then copy the code without writing any code: https://www.cssmatic.com/box-shadow
✌️ I hope this helps you and happy coding!
Marked as helpful0 - There is a best way to add this background and have more control over it. First of all add the image as a background inside the
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