Responsive two SVG background for profile card component

hey guys these is one of the challenges i get interesting in frontend metor since it it seems easy but challenging! the main goal of these design is not designing the card ,it is setting the two SVG backgrounds at the back of the card so how could we do it since we cnat set it like othe svg backgrounds? ->i completed these design using CSS property :before and :after ,so the logic is 1]to have a container with SVG backgrounds that holds some content in it so i put the container position #relative so that i can position my svg backgrounds absolute to the container. 2]don't forget to put overflow hidden and min-height 100vh for container and also z-index -1(to drag background at the back of content)

3]so our pseudoelments after and before has commmon properties both are ..width and height 100vw and 100vh ...z-index -1 ...and position #absolute 4]since for the top svg background i use ::before and for bottom ::after according to there position 5].container:before i set position from top:0 and left:0;[center screen/default position ] 6].container:after i set position from top:100% and left 100%; [out of screen] 7]i use translate property for both of them transform:translate(-50%,-50%); 8]the translate property will drag each of the 50% from right and 50% from bottom 9] i usebackground: url('/images/bg-pattern-top.svg') no-repeat bottom right; /to expand to bottom and right/ for :before andbackground: url('./images/bg-pattern-bottom.svg') no-repeat top left; /to expand to top and left/ for :after !