0

Hice un div con la clase team-box-bg-1 que es la que contiene la imagen de fondo de cada personal.

.team-box-bg-1{
    background: url(../../assets/images/team/team1.jpg) no-repeat center;
}

Pero la imagen se ve cortada, es decir no se presencia toda la imagen dentro del div

introducir la descripción de la imagen aquí

Este es el HTML de la imagen

<div class="col-sm-3 col-xs-12">
    <div class="single-team-box team-box-bg-1">
        <div class="team-box-inner">
            <h3>Nombre</h3>
            <p class="team-meta">Founder &  CEO</p>
            <a href="team.html" class="learn-btn">
                Ver más
            </a>
        </div><!--/.team-box-inner-->

    </div><!--/.single-team-box-->
</div><!--.col-->
4
  • Prueba agregándole la propiedad background-size: contain;. Quizá también te interese usar background-position: top para que se vea la cara que es lo más importante y simplemente ignoras lo que pase con el cuerpo. Si no queda como quieres, posiblemente col-sm-3 y col-xs-12 o algún otro estilo esté limitando el espacio que tiene la foto para mostrarse.
    – Mateo
    Commented el 20 sept. 2022 a las 17:23
  • le quito el center entonces? Commented el 20 sept. 2022 a las 17:24
  • Ha funcionado, gracias Commented el 20 sept. 2022 a las 17:24
  • Podrías usar las propiedades individuales del background para que sea más fácil distinguir entre cada una. En especial si usas muchas. Ya que background permite escribir las otras de forma reducida aunque hace más difícil la lectura.
    – Mateo
    Commented el 20 sept. 2022 a las 17:27

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.