Position absolute and relative

Community feedback

• 

  yishak abrham•2,150

  @yishak621

  Posted over 2 years ago

  Good try but the main point of these project is practice the svg background adjustment and i know it seems hard but here is how the magic is done you will put the bottom svg out of the screen by absolute positioning and the top svg in the middle of the screen . And translate both of them to the left -50% and to the top -50% here is the full detail

  /*Containers*/ .container {   display: flex;   min-height: 100vh;   flex-direction: column;   justify-content: center;   align-items: center;   position: relative;   overflow: hidden;   background: var(--color-one);   z-index: -1; }

  /*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; } /*adding the top svg before the container*/ .container:before {   top: 0;   left: 0;   background: url('/images/bg-pattern-top.svg') no-repeat bottom right; /*to expand to bottom and right*/ } /*adding the top svg after the container*/ .container:after {   top: 100%;   left: 100%;   background: url('./images/bg-pattern-bottom.svg') no-repeat top left; /*to expand to top and left*/ }

  00
• 

  faizan•2,420

  @afaiz-space

  Posted over 2 years ago

  Hey @Souheib-Aloui

  • background circle image used in the body element with the help of background-image property use

  00