Responsive solution using grid and flexbox
Design comparison
Solution retrospective
I had some trouble using background-position property If you have any suggestions to help me to improve my code please let me know!
Community feedback
- @CarlHummPosted almost 2 years ago
Hi
On your desktop media query you are doing this:
background-image: url(./images/bg-pattern-top-desktop.svg) top left no-repeat, url(./images/bg-pattern-bottom-desktop.svg) bottom right no-repeat
You are trying to use background-image to change background-image, background-position and background-repeat at the same time. The shorthand property you're looking for is background which allows you to do this.
Because the code is improperly formatted it will fallback on your mobile styles. If you change background-image to background and adjust size property you should be able to see the difference.
Good luck
Marked as helpful0
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