Design comparison
Solution retrospective
I couldn't put the background right
Community feedback
- @Brian-PobPosted 10 months ago
Hi there Zosima / Santiago!
For the background images, one solution is to place them in a separate div that takes the height and width of the screen instead of setting a
background-image
in CSS. That is the approach that I took in my solution to this challenge.I see from your code that you already tried to use multiple
background-image
s in CSS and that's also a possible solution. You would just need to fix thebackground-position
. You can check out MDN Docs forbackground-position
.Hope this helps!
1 - @danielmrz-devPosted 10 months ago
Hello @SantiagoPonce!
Your solution looks great!
The background pattern with the circles is a bit tricky, but here's how you can do it:
š Add this to the body:
background-color: var(--Dark-cyan); background-image: url("./images/bg-pattern-top.svg"), url("./images/bg-pattern-bottom.svg"); background-repeat: no-repeat, no-repeat; background-position: right 52vw bottom 35vh, left 48vw top 52vh;
I hope it helps!
Other than that, you did an excelent job!
1
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