2
respuestas

¿Por qué se utiliza dos veces la clase persona__imagen?

Nuestro código del archivo persona-imagen.css quedó como sigue:

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

.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-size: cover; height: 300px; background-position: center; width: 300px; background-repeat: no-repeat; border-radius: 100%; }

Hacemos una clase para determinar el espacio de las imágenes de cada persona con la clase .persona__imagen cuando la quité me volvió a aparecer en mosaico la imagen. Mi pregunta es ¿por qué se tiene que definir antes el espacio de la imagen y por qué no es suficiente con indicarlo en un principio?

2 respuestas

Hola Bernardo, yo solo definí el width y el height en la primera llamada a la clase .persona.imagen y el resultado es el mismo. Lo que se debe definir después de asignar una imagen al background son las propiedades de background-size, background-size y background-repeat ya que estas se aplicarán a ese background, si defines estas propieades antes de asignar la imagen no se aplicarán ya que recordemos que los compiladores (en este caso navegador) hacen una lectura del código de arriba hacia abajo... o bueno, esa es la explicación que yo le di jeje esperemos a ver qué dice el scuba team

Muchas gracias, sí de hecho en la siguiente clase explicó cómo hacerlo de manera compacta. Saludos