@correlucas
Posted
๐พ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 use border-radius: 50%;
instead of clip-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 helpful
@Feyisara2306
Posted
@correlucas This is very helpful, thanks a bunch!!!