@yishak621
Posted
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*/ }
