Profile Card Component

Hi Everyone! 👋🏻

I would like to know what the best practice is for positioning the profile picture.

I used a div that contains the card's background and profile image, positioned the parent relative and the child absolute and moved up the image using a negative margin, but don't quite know if this is the best method. What do you think would be a better solution?

   <div class="profile">
      <img src="./images/bg-pattern-card.svg" alt="">
      <picture>
        <img src="./images/image-victor.jpg" alt="Victor Crest's profile picture">
      </picture>
    </div>

	.profile { position: relative;}

	.profile  picture  img {
		border: 0.25rem  solid  var(--clr-white);
		border-radius: 50%;
		position: absolute;
		left: 50%;
		bottom: -3rem;
		transform: translateX(-50%);
	}

Any other feedback you can provide will be greatly appreciated! 😄