html - pagina - Ajustar la imagen de fondo del sitio web al tamaño de la pantalla
insertar imagen html url (11)
Estoy empezando en un sitio web y ya me encuentro con un pequeño problema en el que no puedo encontrar una solución específica.
Quería que el fondo de mi sitio web se ajustara a cualquier tamaño de pantalla en anchura, la altura no importa.
Este es el enlace a mi imagen:
../IMAGES/background.jpg
EDITAR
No tengo idea de lo que está mal, pero por alguna razón el cuerpo ni siquiera quiere obtener la imagen de fondo. Solo muestra un fondo blanco liso.
body
{background-image:url(../IMAGES/background.jpg);}
.. Encontré que las soluciones anteriores no me funcionaron (al menos en las versiones actuales de Firefox y safari).
En mi caso, en realidad estoy tratando de hacerlo con una etiqueta img, no con una imagen de fondo, aunque también debería funcionar para la imagen de fondo si usas altura z:
<img src=''$url'' style=''position:absolute; top,left:0px; width,max-height:100%; border:0;'' >
Esto escala la imagen a ''pantalla completa'' (probablemente rompiendo la relación de aspecto), que era lo que quería hacer pero me costó encontrarlo.
También puede funcionar para la imagen de fondo, aunque renuncié a probar ese tipo de solución después de que la cobertura / contenido no funcionara para mí.
Encontré que el comportamiento de contener no parecía coincidir con la documentación que podía encontrar en cualquier lugar. Comprendí que la documentación que dice contener debería hacer que la dimensión más grande se incluya en la pantalla (aspecto mantenido). Encontré que la imagen contenida siempre era pequeña (la imagen original era grande).
Contenía con algunos cortes más cercanos a lo que quería que a la cobertura, que parece ser que el aspecto se mantiene pero la imagen se escala para que la dimensión más pequeña se ajuste a la pantalla, es decir, siempre haga la imagen lo más grande posible hasta que uno de los Las dimensiones irían fuera de la pantalla ...
Intenté un montón de cosas diferentes, empezando de nuevo, pero descubrí que la altura se ignoraba y desbordaba. (He estado tratando de escalar una imagen de pantalla no panorámica para que esté en pantalla completa en ambos, el aspecto roto está bien para mí). Básicamente, lo anterior es lo que funcionó para mí, espero que ayude a alguien.
Aunque hay respuestas a estas preguntas, pero porque una vez fui víctima de este problema y después de algunas búsquedas en línea no pude resolverlo, pero mis compañeros de pareja me ayudaron y siento que debería compartirlas. Ejemplos explicados a continuación. Carpetas: proyectos web / proyecto1 / imgs-journey.png
imagen de fondo: url (../ imgs / journey.png); repetición de fondo: no repetición; tamaño de fondo: cubierta;
Mis puntos principales son los puntos allí si notó que mi viaje.png está ubicado dentro de una carpeta imgs de otra carpeta, así que debe agregar el punto de acuerdo a las carpetas de números donde se almacena su imagen. En mi caso, la imagen de mi viaje.png se guarda en dos carpetas, por eso se usan dos puntos, por lo que creo que este puede ser el problema de que las imágenes de fondo no aparezcan en nuestros códigos. Gracias.
Corrección de imagen de fondo para pantallas con compatibilidad de navegador css
.full-screen {
height: 100%;
width: 100%;
background-image: url(../images/banner.jpg);
background-size: cover;
background-position: center;
//for browser compatibility
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
}
Prueba esto ,
background: url(../IMAGES/background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
Para obtener más información, siga esta imagen de fondo de página completa perfecta !!
Prueba esto,
.appBg {
background-image: url(".../img/background.jpg");
background-repeat:no-repeat;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
background-size: 100% auto ;
}
Esta funciona para mí
Prueba esto, espero que te ayude:
position: fixed;
top: 0;
width: 100%;
height: 100%;
background-size: cover;
background-image: url(''background.jpg'');
Prueba esto:
background: url(../IMAGES/background.jpg) no-repeat;
background-size: auto auto;
Puedes hacerlo como lo que hice con mi sitio web:
background-repeat: no-repeat;
background-size: cover;
Puedes probar con
.appBackground {
position: relative;
background-image: url(".../img/background.jpg");
background-repeat:no-repeat;
background-size:100% 100vh;
}
funciona para mi :)
puede hacer esto con este complemento http://dev.andreaseberhard.de/jquery/superbgimage/
o
background-image:url(../IMAGES/background.jpg);
background-repeat:no-repeat;
background-size:cover;
Sin necesidad los prefijos de los navegadores. Todo está listo para suporterd en Browers.
background: url("../image/b21.jpg") no-repeat center center fixed;
background-size: 100% 100%;
height: 100%;
position: absolute;
width: 100%;