0

Quiero superponer dos imágenes, pero a la vez, quiero que respondan a la dimensión de la pantalla en la que las vemos. Me estoy ayudando de W3 Css para realizar algunos ajustes. Os dejo mis pruebas en este codepen

Para visualizarlo correctamente utilizo un monitor de 22" a 1920x1080. Quiero que las imágenes aparezcan superpuestas, y si se reduce la resolución de pantalla, ambas imágenes aparezcan centradas relativas al div llamado tercio, que se encuentra en el tercio derecho de la pantalla.

He visto varios posts en los que se explica cómo superponer imágenes, Cómo superponer dos imágenes, Superponer elementos

Pero no logro hacer que funcionen para resolver mi problema. Se supone que ambas imágenes, tienen position:absolute y se referencian al div llamado tercio, que a su vez tiene position:relative; justamente para conseguir esa referencia.

Lo que veo es que la posición absoluta la referencia al marco principal de la página, y no al div tercio que debería ser el container, por lo que cuando redimensiono, la imagen se sale fuera del marco y también un texto que he añadido.

2
  • Lo que quieres hacer, en cuanto a sobreponer una imagen en otra, mientras es válido y posible con CSS es un proceso complicado y sería como cortar una papa con una sierra eléctrica, a lo que voy es esto: deberías de usar un programa que te permita editar imagenes, sería mejor pero esa es mi recomendación como diseñador gráfico. Puedes intentar con esta imagen: imgur.com/mwGZyGO ya esta sobrepuesta la foto de perfil en el objeto que querías usar.Si te interesa el tema, puedes tratar con GIMP que es un software gratuito: gimp.org
    – Eduardo
    Commented el 17 abr. 2021 a las 18:41
  • Tenemos previsto un número muy significativo de usuarios en la web, y por ello no es factible editar una a una cada imagen... quizá podría planteármelo haciendo algo en python para cambiar la imagen, pero la opción manual, no es una opción... Commented el 17 abr. 2021 a las 18:45

1 respuesta 1

1

Para tomar posiciones absolutas se requiere de una base tan sólida como un bloque.
Entonces deberías darle al div #tercio un display: inline-block:

#tercio{
  display: inline-block;
}

#aureola{
   height: 180px;
   width: 250px;
}

#foto{
   position: absolute;
   top: 20px;
   left: 77px; /* Ajuste */
}

#nombre{
   position: absolute;
   top: 120px;
   left: 0;
   width: 250px;
   text-align: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/w3-css/4.1.0/w3.css" rel="stylesheet"/>
<body>
  <div id="dostercios" class="w3-twothird">1</div>
  <div id="tercio" class="w3-display-container">
      <img id="aureola" src="https://firebasestorage.googleapis.com/v0/b/aileague-ffc10.appspot.com/o/aureola.png?alt=media&token=bf45bd41-e67a-4bbb-bc6f-54aad127b208"/>
      <img id="foto" class="w3-circle" src="https://firebasestorage.googleapis.com/v0/b/aileague-ffc10.appspot.com/o/imagen_2021-04-17_121305.png?alt=media&token=b8d26306-5a14-4c4c-a126-6a096c4cd58d" />
      <span id="nombre" class="w3-text-white">Roberto</span>
  </div>
</body>

Nota: En el fragmento de código no se apreciará bien si tiene un ancho menor a 750px: Si un tercio es 250px, tres tercios son 750px.

1
  • Gracias. Funciona perfectamente. Commented el 18 abr. 2021 a las 11:24

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.