Skip to content
Submitted 6 months ago

Responsive, mobile first

ALTera21•240
@ALtera21
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Social proof section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I can now understand a little bit more about flexbox

What challenges did you encounter, and how did you overcome them?

while doing mobile first, it need 3 separate container inside a parent container, when i change it into desktop, the only thing i can think of is to add 2 separate container, up and last container, the up container contains 2 container, left and right.

What specific areas of your project would you like help with?

while adding a bottom background, do i really need to position :fixed; z-index:0; background-size: cover; add width height and all that kind of stuff? is there no simplified version?

Community feedback

  • Koda👹•3,830
    @kodan96Posted 6 months ago

    hi there! 🙌

    You can set multiple background-image to an element if you separate them with a comma:

    body {
  background-image: url(image-url-1.png), url(image-url-2.png);
}

    from there you can modify both's properties using the same syntax:

    body {
  background-image: url(image-url-1.png), url(image-url-2.png);
  background-position: top left, bottom right;
}

    so there's no need to add html elements to your file, or declare z-index and position on them. but be careful, the first value will always be applied to the first background-image.

    Hope this was helpful 🙏

    Good luck and happy coding! 💪

    Marked as helpful
    1
    ALTera21•240
    @ALtera21Posted 6 months ago

    Thanks for the tip @kodan96, i didn't know that you could add multiple background-image with a comma.

    1

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