Profile Card using HTML and CSS

Community feedback

• 

  Flamick•325

  @FlamickPosted 20 days ago

  This is the solution I found. I struggled with this one myself until I dug into a lot of the background image properties. Basically, you're setting the size to auto, so it is the original size. I'm sure you know no-repeat. Background attachement fixed so it stays where you put it. Finally, the background-position. For that, the calc function is nice. The 50% sets it in the middle, then you can offset it with the 2nd value. This is what it looks like for my solution. Hope it helps!

  	background-image: url(./images/bg-pattern-top.svg), url(./images/bg-pattern-bottom.svg);
  	background-size: auto, auto;
  	background-repeat: no-repeat, no-repeat;
  	background-attachment: fixed, fixed;
  	background-position: calc(50% + -27rem) calc(50% + -27rem), calc(50% - -28rem) calc(50% - -32.6rem);```
  

  Marked as helpful

  0

  ---

  

  Synne Storm•440

  @synnestormPosted 20 days ago

  @Flamick It worked! Thank you :)

  0

  

  Flamick•325

  @FlamickPosted 20 days ago

  @synnestorm You're welcome. I have all of my code set as public so if you ever get stuck on something I've done, feel free to reference it.

  1