Submitted over 3 years ago

CSS background-image and background-position for SVG circle

Olivier Beorchia• 10

@obeorchia

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Profile card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

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.

Community feedback

André Rodrigues Almeida• 80

@dralm3ida

Posted over 3 years ago

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!

Olivier Beorchia• 10

@obeorchia

Posted over 3 years ago

@r0drig Thank you for your answer. You're right about the media queries, I remove this part and I have fixed with the vh and vw solution from yvsminvs. I checked your solution and it's a good approach! Thanks to shared your code with me.

Yasmina S• 110

@yvsminvs

Posted over 3 years ago

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!

Olivier Beorchia• 10

@obeorchia

Posted over 3 years ago

@yvsminvs Thank you very much for your answer! That’s help me to fix my background problem and responsiveness with the vh & vw units. Now I know more about these 2 units, thanks for your advices!

Please log in to post a comment

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