Я хочу, чтобы круговое изображение было в середине синего фонового изображения, а контейнер и остальная часть текста был ⇐ Html

[Anonymous]

У меня проблемы с выполнением конкурса карты профиля на Frontend Mentor. Я не могу получить круговое изображение, чтобы быть там, где они хотят, без чего -то другого не ошибается. Это либо огромное пустое пространство между изображением.







Frontend Mentor | Profile card component



.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }









Victor Crest 26
London


80K
Followers

803K
Likes

1.4K
Photos





Challenge by Frontend Mentor.
Coded by Your Name Here.




< /code>
*, *:before, *:after {
box-sizing: border-box;
}

* {
padding: 0;
margin: 0;
}

body {
height: 100vh;
width: 100vw;
background-color: hsl(225, 100%, 94%);
}

main {
display: grid;
place-content: center;
height: 100vh;
width: 100vw;
}

.main-container {
background-color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-width: 375px;
border-radius: 1rem;
overflow: hidden;
}

.img-container {
position: relative;
width: 100%;
height: 200px;
background: url(./images/bg-pattern-card.svg) no-repeat center
center/cover;
border-top-right-radius: 1rem;
border-top-left-radius: 1rem;
}

.profile-img {
z-index: 2;
position: absolute;
border-radius: 50%;
width: 8rem;
}

.profile-img img {
border-radius: 50%;
width: 100%;
border: solid white 7px;
z-index: 2;
}

.name-age {
display: flex;
flex-direction: column;
align-items: center;
z-index: 1;
}

h1,h2 {
color: gray;
font-weight: lighter;
}

span {
color: rgb(1, 0, 34);
font-weight: bold;
}

.line-break {
border: solid .1px gray;
width: 100%;
margin-top: 6rem;
}


Подробнее здесь: https://stackoverflow.com/questions/796 ... ound-image