Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Background Positioning Hack

@CoderKnight02

Desktop design screenshot for the Profile card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hey, I am back with my third problem solved. I found this challege interesting because positioning the circles on the background gave me a little trouble, at firts i tried doing it with responsive dimentios until I found out that the circles wer not streching or shrinking (my opinion analizing the design image) so I used a trick with min-height and min-width on a container. If you have any suggestions on how to do it differently please let me know.

Community feedback

Warren 630

@warrenlee

Posted

Hey Manuel, I think you can give this a try. Instead of using img tags, I used the CSS background image. If you didn't know you can actually use multiple images on the same property.

On your .cont element I would set the height to min-height: 100vh and add the background CSS property with this value. background: url('./images/bg-pattern-top.svg') -50% 400% no-repeat, url('./images/bg-pattern-bottom.svg') 160% -300% no-repeat; (You may see a gap at the top of the screen. Thats because the body tag has margins set by default, so you'd want to reset those by adding margin: 0; padding: 0; to the body tag.) Give it try, if the positions look out of place try tweaking the percentages. See if that works for you.

Marked as helpful

0

@CoderKnight02

Posted

@warrenlee Oh, I see now, thank you so much, I got frustrated trying to do the positioning of the circles with multiple background images because I was not using the correct dimentions, but i see it clear now, Thaks!!!!!

1
Warren 630

@warrenlee

Posted

@CoderKnight02 you are welcome and keep it up!

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

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