Skip to content
Submitted about 2 years ago

Profile Card Component Main

saminstein•130
@saminstein
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

I couldn't position the background images correctly. Can someone please explain how to achieve this? Thank you!

Community feedback

  • Melvin Aguilar 🧑🏻‍💻•61,140
    @MelvinAguilarPosted about 2 years ago

    Hi @saminstein👋, good job completing this challenge! 🎉

    Here are some suggestions you might consider:

    • Update the path of the image:
    url('./bg-pattern-top.svg') left -710px top -710px, url('./bg-pattern-bottom.svg') right -710px bottom -710px var(--dark-cyan);

    Also, you could use this property to make your solution more like the layout:

    body {
    . . .
    background-position: right 52vw bottom 35vh, left 48vw top 52vh;
}

    The background-position for me worked with the vw (viewport width) and vh (viewport height) units, but you can also use percentages. It's just a matter of trial and error to place them as you wish.

    References:

    .

    With semantic tags:

    <body>
   <main class="card">
      . . .
   </main>
<body>

    Good job, and happy coding!

    Marked as helpful
    2

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