Skip to content
Submitted over 2 years ago

Profile Card Component

Nick OD•270
@NickODxyz
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Profile card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

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

Community feedback

  • Florian Stăncioiu•610
    @florianstancioiuPosted over 2 years ago

    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.

    1
  • muhamad•360
    @noheezybucketPosted over 2 years ago

    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.

    1

Please log in to post a comment

Log in with GitHub

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