Profile Card Component with Flexbox + Grid

Solution retrospective
Hi, im having a hard time trying to make the background, any help is welcome!
Please log in to post a comment
Log in with GitHubCommunity feedback
- Account deleted
You can have multiple background images and position them with
background-position
. Take a look at my solution.Also try to make the card responsive. You're using
min-width
which keeps it from getting smaller on smaller screens. - @JulienK94
I personally submit he same project this morning i had the same problem but i pass it not great but cool. you must give the body a background-color of cyan; and a position: relative; after that you must have a main who is not a container just here to align the container of content with display flex, justify-content and align-items; main { position: absolute; background: url(link of top bg-pattern) no-repeat left 50% top 50%, url(link of bottom bg-pattern) no-repeat right 50% bottom 50%; } here values use near top left right and bottom are just examples just the exact values to well place this bg-pattern and you're not forced to use%. i wish that it will help you and happy coding.
Join 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