Skip to content
Submitted over 2 years ago

Background Positioning Hack

Manuel Bacallao Perez•200
@CoderKnight02
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Profile card component
  • HTML
  • CSS
1newbie

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
    @warrenleePosted over 2 years ago

    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
    Manuel Bacallao Perez•200
    @CoderKnight02Posted over 2 years ago

    @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
    @warrenleePosted over 2 years ago

    @CoderKnight02 you are welcome and keep it up!

    Marked as helpful
    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