Skip to content
Submitted almost 3 years ago

✨Social Proof Section -

MaryF•350
@Janselin
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

Hello everyone and thanks for checking on this solution. I had fun making this one, where I put on practise my flexbox skills.

🟣I would like some feedback about it and how i can improve flexbox. I know there are many other properties , I feel im using only the basic ones.

🟣I need help with the background image, I can't make it on the top and bottom properly. I always stuggle with bg sizes. Any tips?

thanks!

Community feedback

  • Luka•820
    @LukaKobaidzePosted almost 3 years ago

    Hello!

    For background images, you can use position: absolute and top: 0, right: 0, bottom: 0, left: 0 and z-index properties.

    For background image on the top left corner, add following properties:

    position: absolute;
top: 0;
left: 0;
z-index: -1;

    And for background image on the bottom right corner:

    position: absolute;
right: 0;
bottom: 0;
z-index: -1;

    If you aren't familiar with positions and top, right, bottom, left properties, check out this source. There are also lot of other sources about positions on the internet that you can search for.

    I used z-index: -1, because without it, images would be on top of the content, and z-index: -1 puts images behind it.

    Hope this helps xD

    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