Submitted over 1 year ago

CSS HTML profile card component non-responsive

Julia• 60

@juliavilbert

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Profile card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Couldnt figure out how to make the background work

Community feedback

Muhammad Umar Hashmi• 150

@M-UmarHashmi

Posted over 1 year ago

Hello! You can make the background similiar using: background-image: url(), url(); image-repeat: no-repeat, no-repeat; background-position: ----------- , --------------; and some other properties. You can learn more about it here https://www.w3schools.com/cssref/pr_background-image.php I hope it will be helpful. Happy Coding!

Marked as helpful

Julia• 60

@juliavilbert

Posted over 1 year ago

@M-UmarHashmi thank you! I just added background

Muhammad Umar Hashmi• 150

@M-UmarHashmi

Posted over 1 year ago

@juliavilbert Very happy to hear that I was able to add some value! Keep up the good work. May Allah help us in our journey towards a successful career! Happy Coding!

visualdennis• 8,375

@visualdenniss

Posted over 1 year ago

Hey Julia,

your solution looks great overall! Also great that u figured it out how to display background images. If you want to tweak their position even further, (cuz atm they collapse on each other when resizing browser) you can use a background-position value like so:

background-position: right 52vw bottom 35vh, left 48vw top 52vh;

vw means viewport width and vh is viewport height. Adjust the numbers are you see fit, but this should be working well enough.

Hope you find this feedback helpful!

Please log in to post a comment

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