Profile Card Component built with semantic HTML and responsive SCSS

Hello Zascu,

Congratulations on finishing the project,

To address your question regarding the background patterns you should set them up using background-image in the body selector. This is the block of code I used for setting up the patterns:

    background-origin: content-box;
    background-image: url(../images/bg-pattern-top.svg), url(../images/bg-pattern-bottom.svg);
    background-position: top -50rem left -75rem, bottom -50rem right -75rem;
    background-repeat: no-repeat, no-repeat;
    background-attachment: fixed, fixed;

Now for making it responsive I just adjusted the position values according to the screen width:

@media (min-width: 768px){
    body {
        background-position: top -40rem left -60rem, bottom -40rem right -60rem;
    }
}
@media (min-width: 1000px){
    body {
        background-position: top -40rem left -45rem, bottom -40rem right -45rem;
    }
}
@media (min-width: 1440px){
    body {
        background-position: top -40rem left -20rem, bottom -50rem right -20rem;
    }
}

I leave you the link to my solution if you like to check it: AgusSaMac profile card code

Have a great day! Happy coding!