Design comparison
Solution retrospective
Fixed the background problem, thanks for the feedback
Community feedback
- @josh76543210Posted over 1 year ago
Hello @ughvop,
Here is an example of how you can display and postion two background images:
body { background-image: url(images/bg-pattern-top.svg), url(images/bg-pattern-bottom.svg); background-position: top -50rem left -28rem, bottom -57rem right -23rem; background-repeat: no-repeat; }
Also, I would recommend using flex-box or CSS grid to center the profile card instead of using margins. This will make the page more responsive. Here is an example using CSS grid:
body { display: grid; place-items: center; min-height: 100vh; }
Happy Coding!
Marked as helpful0@ughvopPosted over 1 year agothanks a lot, the background worked out good but i have overflow scrolling now, both horizontally and vertically. how to fix it? @josh76543210
0@josh76543210Posted over 1 year agoHi @ughvop,
I'm glad the background worked out good!
I don't see any scrolling when I look at your live site. Can you be more specific?
0@josh76543210Posted over 1 year agoOk @ughvop,
The top image on the card is overflowing on smaller screen sizes. To fix this you can do the following:
- Change the
max-with
from 18rem to 100vw - Set the
width
to 18rem
.backround-img > img { max-width: 100vw; width: 18rem; }
0 - Change 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