1

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;
}
Jordan Pike
  • 11
  • 1

3 Answers3

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>
Nick Pantelidis
  • 455
  • 4
  • 12
  • This worked, but it makes the parent container 2x the size of the photos, which adds a lot of unnecessary white space! Do you know a solution for that? – Jordan Pike Jan 29 '21 at 12:56
  • What do you mean exactly? Can you give me an example in codepen or in your original question? – Nick Pantelidis Jan 29 '21 at 13:07
0

.staff {
  width: 500px;
  background: url(https://via.placeholder.com/250x100), url(https://via.placeholder.com/250x100);     
  background-position: top left, top right;
  background-repeat: no-repeat;
  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>

You can find more solutions in this other question: Can I have multiple background images using CSS?

TerminalVelocity
  • 133
  • 2
  • 7
0

You could use before and after pseudo selectors if you want precision control over how you want your images to appear.

.staff {
  height: 377px;
  width: 377px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.about-us-content {
  position: relative;
  z-index: 2;
}

.staff::before,
.staff::after {
  position: absolute;
  content: "";
  width: 50%;
  height: 100%;
  top: 0;
  background-size: cover;
  background-position: center;
}

.staff::before {
  background-image: url("https://images.unsplash.com/photo-1531603845872-e4a07041f521?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=632&q=80");
  left: 0;
}

.staff::after {
  background-image: url("https://images.unsplash.com/photo-1601248318142-f3cd4bb230b4?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=642&q=80");
  left: 50%;
}
<article class="about-us">
  <div class="staff">
    <h2 class="about-us-content">Let us share your story.</h2>
  </div>
</article>
Rod911
  • 752
  • 5
  • 14