Profile card component using HTML / CSS

Nice solution, for your card image instead of using a div with a background color you just need to add an img tag with the image provided <img src="bg-pattern-card.svg"> and give it width: 100% and also don't forget to add an overflow: hidden to your card container to keep the edges round.

And for your circles pattern rather than adding them in html you just need to set them as two background images and position them with the right values using the background-position property, it should be something like this:

body {
  background-color: var(--clr-Dark-cyan);
  background-image: url(images/bg-pattern-top.svg),
                    url(images/bg-pattern-bottom.svg);
  background-repeat: no-repeat, no-repeat;
  background-position: right 49vw bottom 45vh, left 49vw top 50vh;
}

That should fix your problems✨

Happy coding😁🔥

I do not know much about the background property.... I did as you told me and it worked... Thank you very much for your help... ^_^