Design comparison
Solution retrospective
I have two questions:
-
How can I add that little circular space between the profile image and the card pattern? I tried using border around the image but didn't work
-
How can I cut the two circular background images?
Feedbacks are appreciated!
Community feedback
- @correlucasPosted over 2 years ago
๐พHello Akani, congratulations for your solution!
Answering your question:
1.The circle around the image is a border, you just apply to the profile img
border: 4px solid white;
. In this case is better you useborder-radius: 50%;
instead ofclip-path
to create the rounded image and apply the border, see the code bellow:.profile_image { border: 4px solid white; border-radius: 50%; /* clip-path: circle(50%); */ margin-top: -2.5em; }
2.To position the background-image is better you manage it directly to the body css instead of using it from the
html
. See the properties you should use to position these two circles individually:body { background-image: url(/images/bg-pattern-top.svg), url(/images/bg-pattern-bottom.svg); background-repeat: no-repeat; background-position: -50px -300px, 950px 500px; background-size: cover; }
Hope it helps, happy coding!
Marked as helpful1@Feyisara2306Posted over 2 years ago@correlucas This is very helpful, thanks a bunch!!!
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