1

¿Cómo hago para colocar una imagen de tal forma que el footer quede encima de la imagen?

introducir la descripción de la imagen aquí

este es el código css que tengo

body::after{
    content: '';
    position: absolute;
    background: url(../img/sheet_b.png) no-repeat;
    width: 100%;
    height: 60%;
}

1 respuesta 1

1

Lo puedes hacer con z-index:

El valor de z-index indica la posición de profundidad (capa) de u objeto en la página. Los elementos con valores positivos son apilados encima de uno con valores negativos, menores, o no especificados. Dos objetos con el mismo z-index son organizados dependiendo de la colocación de sus etiquietas. Un valor negativo posiciona el objeto debajo de otro que no lo tenga definido. Para remover el efecto, se retira o se cambia el parametro a null.

Nota: La propiedad z-index solo aplica a elementos que tengan la propiedad position en absolute o relative.

fragmento obtenido de cristalab.

Aquí esta un ejemplo funcionando, espero te sea de ayuda, saludos.

.footer{
  z-index:1;
  background-color: blue;
}

.imagen{
  z-index:-1;
  position: absolute;
  margin-top: -70px;
}
<img class="imagen" src="https://cdn.pixabay.com/photo/2016/04/02/09/43/apple-1302430_960_720.jpg">

<div class="footer">
  <h1>Este es el footer<h1><br>
</div>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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