Profile Card Component

Community feedback

• 

  M•940

  @Dev-MV6Posted 7 months ago

  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 👍

  Marked as helpful

  1