2
respuestas

arquitectura css duda en la clase .persona-imagen.css

Referente al curso Arquitectura CSS: Descomplicando los problemas, en el capítulo Estilización del quienes somos y actividad Haga lo que hicimos en aula

por Deibin Jesús Moncada Calderón
| 125.9k xp | 28 posts

buenas espero se encuentren muy bien.

tengo una duda el porque repetimos la clase .persona__imagen 2 veces intente agregar los estilos de la imagen pero no los tomo mi pregunta es porque no los toma si son la misma clase y porque se debe crear la clase .persona__imagen.

muchas gracias

.persona__imagen{ height: 300px;/altura/ width: 300px;/altura/

}

.persona__imagen--roberta{ background: url("../../img/personas/roberta.jpg"); }

.persona__imagen--marcela{ background: url("../../img/personas/marcela.jpg"); }

.persona__imagen--andrea{ background: url("../../img/personas/andrea.jpg"); }

.persona__imagen{ background-position: center; background-repeat: no-repeat;/para que no se repita el cuadro de la imagen/ background-size: cover;/ocupa tamaño total donde se encuentra/ border-radius: 100%;/poner la imagen redonda/ height: 300px;/altura/ width: 300px;/ancho/ }

2 respuestas
por NICOLAS MARTIN SANCHEZ
| 84.9k xp | 20 posts

Si colocas el segundo ".persona_imagen" encima de los ".persona__imagen--nombres" no te va a funcionar correctamente porque aun no se ha asignado ningun background al div.

Para hacerlo más organizado podrías unir los dos ".persona__imagen" en uno solo pero este debe estar debajo de las asignaciones de back-grounds ".persona__imagen--nombres"

por Alan Gabriel Zelarayan Caceres
| 63.6k xp | 54 posts
Desarrolador JAva

Hola Jesús, no sé si ya pudiste solucionarlo, pero también tienes un problema. Deberías intentar, borrando la última barra utilizada en el primer .persona__imagen. Te quedaría algo así: 

.persona__imagen{ 
    height: 300px;
    width: 300px;
    }

Y el segundo te quedaría así: 

.persona__imagen{
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
    border-radius: 100%;
    height:300px;
    width:300px;
}

PD: EL primer .persona__imagen fue demostrativo, se habrá olvidado de eliminarlo o de continuar escribiendo en esa misma clase y no volverla a llamar