CODEWITHSUNDEEP
css
Jordan Pike
Jordan Pike

Reputation: 21

How to have to background images side by side in CSS

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;
}

Upvotes: 2

Views: 1206

Answers (3)

Thunderarea
Thunderarea

Reputation: 479

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>

Upvotes: 1

Rod911
Rod911

Reputation: 860

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>

Upvotes: 0

TerminalVelocity
TerminalVelocity

Reputation: 159

.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?

Upvotes: 0

Related Questions