0

Quisiera que una imagen que tengo de fondo ocupara toda la altura de la pantalla, independientemente del dispositivo en el que se vea.

Mi app es para buscar libros, entonces la altura de la pantalla cambia al momento que tu buscas un libro, y también dependiendo del dispositivo en el que estés, no puedo asignar una altura fija porque se vería ese espacio blanco como en la imagen de abajo, entonces busco que la altura sea responsive. introducir la descripción de la imagen aquí

Mi codigo CSS:

.img-background{
    height: 50vh;
    background-image: linear-gradient(rgba(47, 54, 64,0.80),rgba(53, 59, 72,1)), url('../../../assets/img/book-background.jpg');
    background-repeat: repeat;
}

Mi HTML:

<div class="img-background">
     <!-- Código para mostrar los libros -->
</div>

Espero alguien me pueda ayudar, no se mucho de CSS. Gracias!

1
  • Hola, esto te puede servir w3schools.com/csSref/pr_background-attachment.asp. Puedes colocar en tu clase css height:100vh y background-attachment: fixed. Te recomendaría que no pusieras una imagen de fondo es mejor utilizar colores en un diseño mas limpio, puede que alenté tu pagina cargar esa imagen. el 14 nov. 2020 a las 5:48

1 respuesta 1

1

Para que ocupe toda la altura de la pantalla :

min-height: 100vh;

y para evitar que la imagen se deforme:

background-position: center; 
background-size: cover;

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.