poner - imagen de fondo css pantalla completa

Imagen de fondo del cuerpo de CSS fijada en pantalla completa incluso cuando se acerca o se aleja

Question

Estoy tratando de lograr algo como esto con CSS:

Me gustaría mantener la imagen de fondo del cuerpo fija en pantalla completa, esto se hace mediante el siguiente código:

body
{
background: url(../img/beach.jpg) no-repeat fixed 100% 100%;
}

Ahora puedo verificar que la ventana está llena con esa imagen, al menos esto funciona en mi Firefox 3.6

Sin embargo, se arruinó cuando intenté acercar / alejar (ctrl + - / +), la imagen se estira / encoge cuando la página se acerca.

¿Hay una mejor manera de hacer esto puramente con CSS? No encontré una buena propiedad para la imagen de fondo.

¿O debería empezar a pensar en jQuery para manipular el ancho y la altura sobre la marcha? Ambos estaban configurados al 100%, así que creo que debería funcionar "como siempre" :(

Gracias por cualquier sugerencia de antemano!

Answer 1

Agregue esto en su archivo css:

.custom_class
{
background-image: url(../img/beach.jpg);
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

y luego, en su archivo .html (o .php) llame a esta clase así:

<div class="custom_class">
...
</div>

Answer 2

Aquí está el código simple para la imagen de fondo de la página completa cuando se aplica zoom al zoom: solo se aplica el width:100% en estilo / css

position:absolute; width:100%;

Answer 3

He usado estas técnicas antes y ambas funcionan bien. Si lee los pros / contras de cada uno, puede decidir cuál es el adecuado para su sitio.

Alternativamente, puede utilizar el complemento jQuery de la imagen de fondo de tamaño completo si desea alejarse de los errores de lo anterior.

Answer 4

Se puede hacer mucho con css simple ... el background-size propiedad css se puede configurar para una serie de cosas, así como para cover solo como señala Ranjith.

La configuración de background-size: cover escala la imagen para cubrir toda la pantalla, pero puede significar que parte de la imagen está fuera de la pantalla si la relación de aspecto de la pantalla y la imagen son diferentes.

Una buena alternativa es background-size: contain que cambia el tamaño de la imagen de fondo para que se ajuste al ancho y al alza más pequeños, asegurando que toda la imagen sea visible, pero puede llevar al buzón si las relaciones de aspecto son diferentes.

Por ejemplo:

body {
background: url(/images/bkgd.png) no-repeat rgb(30,30,30) fixed center center;
background-size: contain;
}

Las otras opciones que me resultan menos útiles son: background-size: length <widthpx> <heightpx> que establece el tamaño absoluto de la imagen de fondo. background-size: percentage <width> <height> imagen de fondo es un porcentaje del tamaño de la ventana. (ver la página de w3schools.com )

Answer 5

Use Directamente como este

.bg-div{
background: url(../img/beach.jpg) no-repeat fixed 100% 100%;
}

o llamar a CSS por separado como

.bg-div{
background-image: url(../img/beach.jpg);
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Answer 6

hay otra tecnica

utilizar

background-size:cover

Eso es todo el conjunto de CSS es

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

Los navegadores más recientes admiten la propiedad predeterminada.