Profile card component using HTML / CSS

Community feedback

• 

  Karrar Hussein•220

  @Karrar-HusseinPosted almost 2 years ago

  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😁🔥

  Marked as helpful

  1
• 

  Aadarsh Rai•20

  @aadarsh-raiPosted almost 2 years ago

  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... ^_^

  1