Submitted almost 4 years ago

Profile card with Tailwind CSS(Purged css)

@natarajchakraborty

A solution to the Profile card component challenge

Solution retrospective

I had a tough time in positioning the top and bottom bg-pattern-*, I tried absolute positioned images, and also background-image both, but none of the approaches scale the image appropriately(increase circle radius) at every screen size so that only corners of the profile card is touched(overlapped) while positioned at the top-left and bottom-right corner(At every screen size, tried using %, vh, vw, but couldn't achieve it perfectly at every screen size) . How you guys approached and solved it? please advice!.

Code

Please log in to post a comment

Community feedback

Benjo Quilario•1,790
@benjoquilario
Posted almost 4 years ago
Hi natarajchakraborty, we have a same problem when, I'm creating this project.

Try this code: body { background-image: url("./images/bg-pattern-top.svg"), url("./images/bg-pattern-bottom.svg"); background-repeat: no-repeat; background-position: right 50vw bottom 40vh, left 50vw top 40vh; } Keep coding 🔥🔥

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