0
171
VistasLa cubierta de tamaño de fondo no funciona en páginas más largas en dispositivos móviles
Este es un proyecto de Next.js y el móvil que se usa aquí es Google Pixel 3a. Tengo un problema en el que mi imagen de fondo no se muestra en páginas más largas. Así es como se ve en las páginas donde la altura no excede la altura de la ventana gráfica 
Pero en algunas páginas más largas en las que debe desplazarse para llegar al final, no se muestra en absoluto.
body { background-image: url("https://via.placeholder.com/500"); background-size: cover; margin: 0; padding-left: 5vw; padding-right: 5vw; height: 100vh; min-height: 100%; width: 90vw; font-family: system-ui; overflow-x: hidden; font-size: 1.3rem; }Si cambio el tamaño de fondo a automático, funcionará en todas las páginas, pero me gustaría cubrir. Tal vez no entiendo cómo funciona la portada para las páginas en las que se requiere desplazamiento, pero me gustaría que la imagen de fondo se muestre como está en la primera imagen, y si el contenido es más largo que el puerto de visualización, el contenido debería simplemente desplazarse por el imagen sin que la imagen se mueva. Cualquier ayuda es apreciada. Gracias.
1 Respuestas
Responde la pregunta0
Si lo he entendido correctamente, desea que la imagen de fondo al menos llene la ventana gráfica, pero si el cuerpo es más alto que eso, desea que llene todo el cuerpo.
Por lo tanto, dígale que la altura mínima del cuerpo debe ser 100vh y no establezca una altura real, deje que lo resuelva a partir del contenido.
Asumo en este fragmento que solo desea una copia del fondo, centrada y usando la cubierta de tamaño (por lo que puede recortarse en la parte superior/inferior o en los lados, según las relaciones de aspecto relativas).
Se coloca un div ficticio en el fragmento para garantizar que nos desplacemos.
body { background-image: url("https://via.placeholder.com/500"); background-size: cover; background-repeat: no-repeat no-repeat; background-position: center center; margin: 0; padding-left: 5vw; padding-right: 5vw; min-height: 100vh; width: 90vw; font-family: system-ui; overflow-x: hidden; font-size: 1.3rem; } div { height: 350vh; } <div></div>