Profile Card Component

Hi there 👋

Getting the background right can be the most difficult part in this challenge, here's one way you can achieve a very close result to the original design, with the help of the background-position property and CSS media queries to make it responsive:

/* Mobile first */
body {
  background-position: left -330px top -300px, right -428px bottom -326px;
  background-size: 540px, 640px;
}

@media (min-width: 700px) {
  /* Medium size screens */
  body {
    background-position: left -585px top -510px, right -530px bottom -633px;
    background-size: 978px;
  }
}

@media (min-width: 1300px) {
  /* Large size screens */
  body {
    background-position: left -285px top -510px, right -230px bottom -633px;
  }
}

Hope you find this helpful 👍