0

Hola estoy intentando poner esta imagen por encima del div class="background-img-1"

section class="hero">
      <div class="row">
        <!-- Columna izquierda -->
        <div class="col-6 p-5 justify-content-center">
          <h2>A Simple Bookmark Manager</h2>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Consequuntur, asperiores suscipit quibusdam quo inventore quisquam
            fugiat. Ducimus nisi expedita ipsum vel est delectus, accusamus
            eaque, nesciunt, dicta fugiat earum amet.
          </p>
          <!-- buttons -->
        </div>
        <div class="col-6 p-5">
          <img
            src="/Recursos_projecte_sprint_2-20230213/Imagenes/illustration-hero.svg"
            alt=""
            class="z-3 position-absolute top-25"
          />
          <div
            class="background-img-1 z-n1 position-absolute end-0 top-50 w-25 p-3 h-50 d-inline-block"
          ></div>
        </div>
      </div>
    </section>
introducir la descripción de la imagen aquí introducir la descripción de la imagen aquí

pero a mi me sale asi. muchas gracias

2
  • Incluye los links de bootstrap porfavor
    – Luis
    el 3 abr. a las 16:03
  • 1
    Por favor, adjunta un ejemplo mínimo, completo y verificable, necesitamos reproducir tu código para ver el problema con facilidad (HTML, CSS y la versión de Bootstrap que estás usando). el 3 abr. a las 16:08

1 respuesta 1

0

Puedes crear un contenedor que agregue la imagen y dentro un div absoluto que contenga la segunda imagen.

Otra idea seria usar un contenedor con una imagen dentro y la segunda imagen como background puesto a la derecha, ahora, como el objeto es muy simple la mejor forma sería crear el objeto con css y no agregar imagenes, con eso te ahorras un par de milisegundos en tiempos de carga, por ejemplo:

.contenedor-imagen {
  width: 100%;
  padding: 50px;
  box-sizing: border-box;
  position: relative;
  text-align: center;
}
.contenedor-imagen img {
  max-width: 100%;
}
.object {
  width: 70%;
  height: 200px;
  position: absolute;
  right: 0;
  bottom: 0;
  border-top-left-radius: 9999px;
  border-bottom-left-radius: 9999px;
  background-color: hsl(231 69% 60% / 1 );
  z-index: -1;
}
<div class="contenedor-imagen">
  <img src="https://tailwindfromscratch.com/website-projects/bookmark/images/illustration-hero.svg">
<div class="object"></div>
</div>

Tu Respuesta

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

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