0

Tengo una sección en la que habrá 9 pequeños div, cada uno con una imagen y titulos diferentes. Pero sé que como estén posicionados los titulos etc van a ser lo mismo, con lo cual le he dado a ese "pequeño div" una clase, con lo cual los atributos que les de a esa clase pretendo que se apliquen a los 9 div:

.first_section{
 width: 100%;
 height: 1000px;
 background: #E8EFEE;
 display: flex;
 justify-content: center;
 align-items: center;
}
.first_subsection{
  width: 85%;
  height: 85%;
  border: 1px solid black;
}
.first_minidiv{
  overflow: hidden;
  background-size: cover;
  background-image: url('img/london.jpg');
  background-position: center;
  width: 30%;
  height: 30%;
}
<section>
    <div class="first_section">
        <div class="first_subsection">
            <h5>Destinos favoritos de los viajeros con origen Madrid</h4>
            <div class="first_minidiv">
                <p class="categoria">Diversion en familia</p>
                <div class="minidiv_desc">
                    <h4>Londres <br/>44€</h4>
                    <p class="noches">8 noches</p>
                </div>
            </div>
        </div>
    </div>
</section>

Hasta aquí bien pero cada vez que cambio la foto en " background-image: url('img/london.jpg');" obviamente tengo un problema, se sobrescribe la foto y todas acaban con la misma.

He probado a poner <div class="first_minidiv uno dos tres cuatro cinco seis siete ocho nueve"> Aplicando la imagen invididualmente a cada clase por numeros y dejar first_minidiv como está pero quitando el atributo de background-image (no se si me explico) pero también se sobrescribe.

¿Alguna idea?

12
  • Desde donde estas cambiando el background-image individualmente? el 20 feb. 2019 a las 14:01
  • 1
    Podrías especificar tu background-image directamente en el elemento del DOM, eso lo solucionaría... el 20 feb. 2019 a las 14:05
  • 3
    Lo que yo haría sería tener la clase para darles a tus div esos estilos generales que necesitan que tengan todos y luego, ponerle a cada uno su propia id de esa manera puedes ponerles a cada uno su propia imagen de background. De esa manera ya no metería el background-img en la clase, si no que lo sacaría de ahí y metería el suyo propio en cada id.
    – phpMyGuel
    el 20 feb. 2019 a las 14:07
  • 1
    pero si lo va a hacer por css como mas se va a hacer? si fuera desde js sería mucho mas eficiente @PauloUrbanoRivera el 20 feb. 2019 a las 14:12
  • 3
    Si fuese con JS podrías montar un bucle for que recorra cada uno de los elementos y un array con la ruta de las imágenes a insertar de tal manera que a cada nueva iteración del bucle salte al siguiente item del array y lo inserte. Pero la pregunta se hace en referencia a HTML y CSS por lo que te queda casi como única opción el ir colocando los background por id para que el elemento quede referenciado únicamente. Aunque sean 100, como comentas.
    – phpMyGuel
    el 20 feb. 2019 a las 14:14

1 respuesta 1

4

Intenta ponerle un id al div y luego en el css con el id le pones la imagen de fondo

.first_minidiv{
        overflow: hidden;
        background-size: cover;        
        background-position: center;
        width: 30%;
        height: 30%;
      }
      #london{
        background-image: url('img/london.jpg');
      }

Tu Respuesta

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.