Estaba tratando de crear un carrusel replicando el que está en https://www.fcbarcelona.com/en/ El sitio web del Barça. Fue bastante fácil, aunque no puedo entender, cómo hacer que la background-image se centre dentro de mi div , a pesar de mi tamaño de divs, que fluctúa.
Esto es lo que tengo hasta ahora.
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>Sé que mi código parece un poco flojo, solo quería que funcionara
Puede usar la propiedad background-position para hacerlo.
Supongo que al dar un valor center para lo mismo se solucionaría el problema.
Pruebe background-position: center