Profile card component using Mobile-first approach

Community feedback

• 

  Bryan Li•3,530

  @Zy8712Posted 12 months ago

  To set up the background images you can do something along the lines of this:

  background-color: var(--theme-dark-cyan);
    background-image: url("./images/bg-pattern-top.svg"), url("./images/bg-pattern-bottom.svg");
    background-repeat: no-repeat, no-repeat;
    background-position: right 52vw bottom 35vh, left 48vw top 52vh;
    /* top img is offset 52 percent of the vw from the right and offset 35 of the vh from the bottom*/
    /* bottom img is offset 48 percent of the vw from the left and offset 52 of the vh from the top*/
  

  Hope you find this feedback useful 👍

  Marked as helpful

  1
• 

  dselimovic02•220

  @dselimovic02Posted 12 months ago

  You can check my solution for the answer. Long story short, set the circles as background images for body and position them.

  Lice site url: https://dselimovic02.github.io/profile-card/

  Cheers!

  Marked as helpful

  1

  ---

  

  Macury•40

  @MacuryPosted 12 months ago

  Thank you @dselimovic02 Your comment was very helpful

  0