Profile Card Component built with semantic HTML and responsive SCSS

Community feedback

• 

  Agustin Sanchez•250

  @AgusSaMacPosted over 1 year ago

  Hello Zascu,

  Congratulations on finishing the project,

  To address your question regarding the background patterns you should set them up using background-image in the body selector. This is the block of code I used for setting up the patterns:

      background-origin: content-box;
      background-image: url(../images/bg-pattern-top.svg), url(../images/bg-pattern-bottom.svg);
      background-position: top -50rem left -75rem, bottom -50rem right -75rem;
      background-repeat: no-repeat, no-repeat;
      background-attachment: fixed, fixed;
  

  Now for making it responsive I just adjusted the position values according to the screen width:

  @media (min-width: 768px){
      body {
          background-position: top -40rem left -60rem, bottom -40rem right -60rem;
      }
  }
  @media (min-width: 1000px){
      body {
          background-position: top -40rem left -45rem, bottom -40rem right -45rem;
      }
  }
  @media (min-width: 1440px){
      body {
          background-position: top -40rem left -20rem, bottom -50rem right -20rem;
      }
  }
  

  I leave you the link to my solution if you like to check it: AgusSaMac profile card code

  Have a great day! Happy coding!

  Marked as helpful

  1

  ---

  

  Zascu•140

  @ZascuOfficialPosted over 1 year ago

  @AgusSaMac

  Thank you so much for your feedback!

  From your comment, I learned that I could use multiple images inside of the background-image property, not just one. That is honestly really helpful.

  I appreciate your help. Have a good one!

  0