Skip to content
Submitted over 4 years ago

CSS background-image and background-position for SVG circle

Olivier Beorchia•10
@obeorchia
A solution to the Profile card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hello, It's my first challenge on frontend mentor. Thanks for your challenge ! For this challenge, I had some difficulty on the SVG background integration. I used in CSS background-image and background-position to place the two SVG circle, but I'm not satisfy of the responsive behavior for the background. I used media queries for adjust the mobile size because the two circle are not in a good position in the small screen size. I don't think my solution is the best one. If you can help and advise me on the good technique that would be super nice! Thank you in advance for your feedback.

Code

Please log in to post a comment

Log in

Community feedback

  • André Rodrigues Almeida•80
    @dralm3ida

    Hi Olivier!

    I think using media queries for this exercise is a bit overkill. I used position fixed and controled the responsiveness using the top, bottom, left, right properties. You can check my solution if it helps.

    Cheers!

  • Yasmina S•110
    @yvsminvs

    Hi Olivier!

    Congratulations on your first challenge!!

    I see that you added the circles as background images which is amazing. I'd suggest you to use vh and vw instead of px when you position these. With vh and vw units the images adjust to the viewport and you can achieve the responsiveness of the background. You can check my solution to see how to implement it.

    Hope it helps you!

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