html - toda - Cómo hacer fondo de pantalla completa en una página web

imagen de fondo html5

Question

¿Cómo hacer una imagen como fondo para la página web, independientemente del tamaño de pantalla que muestre esta página web? Quiero mostrarlo correctamente ¿Cómo?

Answer 1

A través de plugins jQuery;)

• http://srobbin.com/jquery-plugins/backstretch/
• http://buildinternet.com/project/supersized/

Answer 2

Haz un div 100% ancho y 100% alto. Luego establece una imagen de fondo.

Answer 3

Una búsqueda rápida de generador de fondo de palabras clave muestra este patrón de fondo producido por CSS3 que se crea dinámicamente.

Al mantener la imagen pequeña y repetible , no tendrá problemas para cargarla en dispositivos móviles y el pequeño tamaño de archivo de la imagen se ocupará de la memoria.

Aquí está el marcado para la sección de la head :

<style type="text/css">
body {
background-image:url(''path/to/your/image/background.png'');
width: 100%;
height: 100%;
}
</style>

Si vas a usar una imagen de algo que debería preservar la relación de aspecto , como personas u objetos, entonces no quieres un 100% de ancho y alto, ya que eso estirará la imagen fuera de proporción. En su lugar, consulte este tutorial rápido que muestra diferentes métodos para aplicar imágenes de fondo mediante CSS.

Answer 4

Usa el siguiente código en tu CSS

html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

aquí está el enlace donde lo encontré:

Answer 5

Use este CSS para hacer un fondo de pantalla completo en una página web.

body {
margin:0;
padding:0;
background:url("https://static.vecteezy.com/system/resources/previews/000/106/719/original/vector-abstract-blue-wave-background.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Answer 6

es muy simple usar este css (reemplazar image.jpg con tu imagen de fondo)

body{height:100%;
width:100%;
background-image:url(image.jpg);/*your background image*/
background-repeat:no-repeat;/*we want to have one single image not a repeated one*/
background-size:cover;/*this sets the image to fullscreen covering the whole screen*/
/*css hack for ie*/
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=''.image.jpg'',sizingMethod=''scale'');
-ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src=''image.jpg'',sizingMethod=''scale'')";
}

Answer 7

um ¿por qué no simplemente establecer una imagen en la capa inferior y renunciar a todas las molestias

<img src=''yourmom.png'' style=''position:fixed;top:0px;left:0px;width:100%;height:100%;z-index:-1;''>