How to repeat two images alternating them?

HTML-CSS
1

Hey everyone,
a project I’m working on requires me to have something like this:

example
example1684×270 3.38 KB

Image1 and Image2 would be two svg logos that should be alternating on one line like that, until there’s enough space to do so. I’ve tried playing around with background-repeat and the likes, but I can’t figure out how to achieve the wanted look. Can someone point me in the right direction?

2

Hi sfal!
Can i see your code?

3 
<p>A text</p>
      <div class="logos">
      </div>

.logos {
  height: 80px;
  background-size: 80px;
  background-image: url("/assets/logo1.svg"), url("/assets/logo2.svg");
  background-repeat: repeat-x, repeat-x;
  background-position: left, right;
  background-blend-mode: multiply;
}

Sorry I didn’t post it earlier, I figured I got it all wrong :sweat_smile:

4

Try to write code in other class.
For example:

A text

.logos1{
height: 80px;
background-size: 80px;
background-image: url("/assets/logo1.svg");
background-repeat: repeat-x;
background-position: left;
background-blend-mode: multiply;
}
.logos2{
height: 80px;
background-size: 80px;
background-image: url("/assets/logo1.svg");
background-repeat: repeat-x;
background-position: right;
background-blend-mode: multiply;
}
.logos{
display: inline-block;
}

5

Hmm I had tried something like this (have tried your code now as well), but it just creates a repetition of logo1 on one line, and a repetition of logo2 on another line.

6

I had a similar problem and this was my solution