Profile-card-component-main

Community feedback

• 

  John Rey Faciolan•220

  @juani2Posted over 3 years ago

  Hello Abednigo,

  for your concerns on the background. Background position together with viewport unit can be used. Here's a snippet from my solution.

  .profile-card-section {
      
      background-color: hsl(185, 75%, 39%);
      background-image: url('/images/bg-pattern-top.svg'), url('/images/bg-pattern-bottom.svg');
      background-repeat: no-repeat, no-repeat;
      background-size: contain, contain;
      background-position: top -35vh left -35vh, bottom -35vh right -35vh;
      display: flex;
      align-items: center;
  }```
  
  the +/-35vh offsets were derived from trial-and-error while resizing the view-port. It is not a pixel perfect value but the circles will show on mobile, tablet and desktop screens.
  
  Hope this one helps.
  

  0

  ---

  

  Abednigo Jabulane Tshabalala•60

  @tshabalalaajPosted over 3 years ago

  @juani2 thank you I will be trying that.

  0
• 

  P

  Axseinga•430

  @axseingaPosted over 3 years ago

  Hi there! That's a very nice solution, congrats on finishing it! Did you try to add images as a background to body and then position it with background-position property? I think this might work, however a newbie talking here ;)

  0

  ---

  

  Abednigo Jabulane Tshabalala•60

  @tshabalalaajPosted over 3 years ago

  @axseinga thank you I will be trying that.

  0