1

I was trying to create a carousel replicating the one as in https://www.fcbarcelona.com/en/ Barca's website. It was pretty easy, though I can't wrap my head around, on how to make the background-image be centered inside my div, despite my divs size, which fluctuates.

Here is what I got so far.

const one = document.getElementById('one')
const two = document.getElementById('two')
const three = document.getElementById('three')

one.addEventListener("mouseover", ()=>{
  one.style.flex= " 1 0 50%";
  two.style.flex= " 1 0 25%";
  three.style.flex= " 1 0 25%";
  one.style.transition = '0.4s ease';
});

two.addEventListener("mouseover", ()=>{
  one.style.flex= " 1 0 25%";
  two.style.flex= " 1 0 50%";
  three.style.flex= " 1 0 25%";
  two.style.transition = '0.4s ease';
});

three.addEventListener("mouseover", ()=>{
  one.style.flex= " 1 0 25%";
  two.style.flex= " 1 0 25%";
  three.style.flex= " 1 0 50%";
  three.style.transition = '0.4s ease';
});
.main-body{
  display: flex;
}

.column{
  cursor: pointer;
  background-image:url("https://www.basketblog.gr/articleimages/LebronJames_April20212112121212.jpg");
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height:500px;
}

#one{
  flex: 1 0 25%;
}

#two{
  flex: 1 0 50%;
}

#three{
  flex: 1 0 25%;
}
<body>
  <div class="main-body">
      <div class="column" id="one">
      </div>
      <div class="column" id="two">
      </div>
      <div class="column" id="three">
      </div>
  </div>  
</body>

I know my code seems a little lazy, I just wanted it to work

Abin Thaha
  • 4,493
  • 3
  • 13
  • 41
Giannis Sioutis
  • 19
  • 1

1 Answers1

4

You can use background-position property to do so.

By giving center value for the same would fix the problem I guess.

Try background-position: center

Abin Thaha
  • 4,493
  • 3
  • 13
  • 41