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