Frontend Mentor | Profile card component - only html & css coding challenge solution

Solution retrospective

I was wondering if there is a better way to responsively position background images, but I couldn't come up with anything better than this:

background-image: url('./images/bg-pattern-top.svg'), url('./images/bg-pattern-bottom.svg');
 background-repeat: no-repeat, no-repeat;
 background-position: calc(-40rem + 20vw) -90vh, 50vw 40vh;

Community feedback

Abdul Khalid 🚀• 72,080

@0xabdulkhalid

Posted about 1 year ago

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

I have other recommendations regarding your code that I believe will be of great interest to you.

BACKGROUND iMAGE 📸:

let me explain how you can easily apply the background color along with the background svg they provided.

Add the following style rule to your css, and then experience the changes

body {
  background: url(./images/bg-pattern-top.svg), url(./images/bg-pattern-bottom.svg);
  background-position: right 52vw bottom 35vh, left 48vw top 52vh;
  background-repeat: no-repeat, no-repeat;
  background-color: hsl(185deg, 75%, 39%);
}

Tip, Don't forget to generate a new screenshot after editing the css file

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!

Marked as helpful

Profile card component - only html & css

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community