Submitted about 3 years ago

Profile Card Component using HTML and CSS

@WebdevShefali

A solution to the Profile card component challenge

Solution retrospective

I attempted this challenge. I got everything done correctly except the background. Please help me out with adding .svg as background image.

Code

Please log in to post a comment

Community feedback

NMT Nabeel•80

@T-Nabeel

Posted about 3 years ago

Hey, Nice work on the first challenge.

I did took a look into your code. Try adding the following code after body selector. It will work.

body::before,
body::after {
  content: '';
  position: absolute;
  width: 100vw;
  height: 100vh;
  background-size: cover;
  transform: translate(-50%, -50%);
}

body::before {
  z-index: -1;
  background: url("/bg-pattern-top.svg") no-repeat bottom right;
  top: 0;
  left: 0;
}

body::after {
  z-index: -1;
  background: url("/bg-pattern-bottom.svg") no-repeat top left;
  top: 100%;
  left: 100%;
}

Hope this helps! 👍

Marked as helpful

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord