How to repeat two images alternating them?

How to repeat two images alternating them?
0

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


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?

Hi sfal!
Can i see your code?

<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:

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

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.

I had a similar problem and this was my solution