Skip to content
Submitted over 3 years ago

Profile Card Component

Nick OD•270
@NickODxyz
A solution to the Profile card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hi all,

Background images and how to move them around absolutely kills me. It would be great if I can get some tips on how best to do this. The two on this little project were a nightmare lol

What is the go to way for getting a background image to appear? This time round I used padding but it was confusing and I had to use a random % number for it to work. Any tips would be great on this one.

If you could let me know if I went he best way about adding them in to the HTML and then positioning them in the CSS, that would be great.

Thanks, Nick

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • Florian Stăncioiu•710
    @florianstancioiu

    Hi Nick,

    You can actually use background-image with multiple images on the body or the containing div you have and after you do that you can position each individual image using background-position. Make sure to disable the repeating backgrounds using background-repeat: no-repeat;. You don't need to have 2 extra divs for the background images, it might work that way though but I haven't tried it.

  • muhamad•360
    @noheezybucket

    Hi Nick,

    For the background images in this challenge, I've putted the images in the HTML and then use position: fixed; property in the CSS to make it stand in the background.

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