Skip to content
OverviewSolutions
2
Comments
1
Rilind Tasholli
@rilindtasholli

All comments

  • Cindy•40
    @ghks0201Submitted about 3 years ago

    For some reason the background images move with zoom-in / zoom-out and unable to stay in fixed position. Anyone have idea on how to fix this?

    HTML/CSS Profile Card Component

    1
    Rilind Tasholli•40
    @rilindtasholliPosted about 3 years ago

    Hello Cindy, congrats on your solution 👍 It's very nice.

    To fix the issue you have, instead of using percentage(%) for positioning background images try using viewport units (vw for width and vh for height). And also define the position values (top, right, bottom, left) because if we don't then by default the first value is for left and second value is for top.

    So change this line of code:

    background-position: -150% 150%, 200% -100%;

    To this:

    background-position: right 45vw bottom 45vh, left 45vw top 45vh;

    I hope this was helpful 🙂

    Another small detail you can add is to make the card responsive. You can check my solution here

    0