Profile Card

Community feedback

• 

  yishak abrham•2,150

  @yishak621Posted almost 2 years ago

  Its very easy and tricky at the same time ...by default The two circular background svg pics are placed in center....so to place them at the desired place u should use transform:translate property it enables the svg to keep them in the position even if u resize the width of the screen .....so how can we do it? well ...first we add the backgrounds as pusdoelements (:after and :before ) and then we will move both of them to the left 50% and to the top 50%

  /*psuedo elments*/ 
   .container:before, 
   .container:after { 
     position: absolute; 
     content: ''; 
     width: 100vw; 
     height: 100vh; 
     background-size: auto; 
     transform: translate(-50%, -50%); /*to the left and top*/ 
    
     z-index: -1; 
   }
  

  then if u see in the screen one of the circular svg is in position so we don't touch that we just keep that svg pic in that place(left top) ...

  /*adding the top svg before the container*/ 
   .container:before { 
     top: 0; 
     left: 0; 
     background: url('/images/bg-pattern-top.svg') no-repeat ; 
  
   }
  

  But what about the other circle ? well its just out of the screen completely ..so we should bring it back to a desired place by moving it 100% to the bottom and 100% to the right ..

  /*adding the top svg after the container*/ 
   .container:after { 
     top: 100%; 
     left: 100%; 
     background: url('./images/bg-pattern-bottom.svg') no-repeat ; 
   }
  

  Marked as helpful

  1

  ---

  

  Dewan Md Shakib Al-Mujib•410

  @DewanshakibPosted almost 2 years ago

  @yishak621 You are correct.But i am very new at this fleild.I am doing web development since 2 month.So lot to know tnx for your suggestion.

  1

  

  yishak abrham•2,150

  @yishak621Posted almost 2 years ago

  @Dewanshakib sure keep coding bro i'm also 4 months only in the web dev education ...there are a lot to learn just be open minded and open to know things ...specially these front end mentor website help me to learn a lot of things

  1

  

  Yoga Pratama•280

  @yoga-worksheetPosted almost 2 years ago

  @yishak621 So far i always curious how to place the background pattern like this. Your suggestion help me a lot! Thanks for your help!

  0
• 

  Dewan Md Shakib Al-Mujib•410

  @DewanshakibPosted almost 2 years ago

  Go to my repo: (https://github.com/Dewanshakib/profile-card-component).In their look for style.css and find main check carefully you will have your answers.

  0

  ---

  

  Yoga Pratama•280

  @yoga-worksheetPosted almost 2 years ago

  @Dewanshakib Thanks for your help. I'll check it

  1