CSS background-image and background-position for SVG circle
Design comparison
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
- @dralm3idaPosted 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!
0@obeorchiaPosted 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.
0 - @yvsminvsPosted 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!
0@obeorchiaPosted 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!
0
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