Profile Card

Hello there 👋. Good job on completing the challenge !

You could use the CSS backgrounds properties to set the background:

body {
    . . .
    min-height: 100vh;
    background-color: var(--cyan);
    background-image: url(./images/bg-pattern-top.svg), url(./images/bg-pattern-bottom.svg);
    background-repeat: no-repeat, no-repeat;
    background-position: right 52vw bottom 35vh, left 48vw top 52vh;
}

• background-color: Change the color of the background.
• background-image: Set a background image.
• background-repeat: Determines whether or not a background image will be repeated along the horizontal and vertical axes.
• background-position: This property specifies the starting position of a background image. More information.
• background-size can also be used to specify the size of the background image.

The background property is shorthand for all the properties mentioned above but for now. It is better to understand them separately.

The background-position for me worked with the vw (viewport width) and vh (viewport height) units, but you can also use percentages. It's just a matter of trial and error to place them as you wish.

References:

1. CSS background Property |
2. Background property
3. Background-repeat (MDN)

I hope you find it useful! 😄

Happy coding!