html css

Community feedback

• 

  yishak abrham•2,150

  @yishak621

  Posted over 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 ; 
   }
  

  00

  Marked as helpful