How to have to background images side by side in CSS

Question

I'm trying to get one container to have two background images side by side, so I can center some text over the top of the two. As of right now I can only get one background image to show. How to I slide them apart?

HTML:

<article class="about-us">
    <div class="staff">
        <h2 class="about-us-content">Let us share your story.</h2>
    </div>
</article>

CSS:

 .staff {
    height: 377px;
    width: 377px;
    background-image: url(Image1), url(Image2);
    background-position: top left, bottom right;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}

question from:https://stackoverflow.com/questions/65937358/how-to-have-to-background-images-side-by-side-in-css

Answer 1

You simply have to add:

background-size: 50% 100%;

(or whatever percentage you want depending on what do you want to achieve)

Check the below snippet.

But please add a screenshot about what do you want exactly.

 .staff {
    height: 377px;
    width: 377px;
    background-image: url("https://cdn.pixabay.com/photo/2021/01/23/13/01/hills-5942468_1280.jpg"), url("https://cdn.pixabay.com/photo/2020/04/28/21/01/wallpaper-5106327_1280.jpg");
    background-position: top left, bottom right;
    background-repeat: no-repeat;
    background-size: 50% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

<article class="about-us">
    <div class="staff">
        <h2 class="about-us-content">Let us share your story.</h2>
    </div>
</article>