Design comparison
Solution retrospective
Any tips to improve would be greatly appreciated.
Community feedback
- @xvferdyPosted almost 3 years ago
Great now the background is not repeated anymore 👌, but the text on the card is hard to see because it's now white.
You can add this code below to tweak up the design,
In the
body
selector, switch the property forcolor: var(--pale-neutral)
tocolor: var(--de-neutral)
to have the card text readable, then addbackground-color: var(--primary-color)
andbackground-size: cover
so the background have some color and covered all the body.body { margin: var(--card-width) 0 0 0; font-family: var(--body-font); font-size: var(--smaller-font-size); background-image: url("../images/pattern-background-desktop.svg"); background-repeat: no-repeat; color: var(--de-neutral); height: 100%; width: 100%; line-height: 1.6; background-color: var(--primary-color); background-size: cover; }
0 - @MordenWebDevPosted almost 3 years ago
nice job, you can see the background gets repeated you can fix the repeated background by using background-repeat: no-repeat; so that the background does not repeat
0
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