En mi página tengo 2-3 secciones que tienen 100% de ancho y fondo. Cuando lo abro en pantalla completa, todo está bien, pero cuando la pantalla es más pequeña que 960px (ancho de contenido en esta sección), la imagen de fondo no es toda la página. El whisky del lado derecho está escondido en el primer momento no tiene fondo, es blanco. Puede ver lo que quiero decir aquí: http://micobg.net/10th/CSS: ¿ancho y fondo del 100%?
Utilice el fondo de ancho mínimo: 960px; en lugar de ancho: 100%; Cheers
Simplemente agregue el estilo background-size:100% al elemento donde aplicó background-image. Funciona en Firefox, Safari y Opera. Por ejemplo:
<style>
.divWithBgImage {
width: 100%;
height: 600px;
background-image: url(image.jpg);
background-repeat: no-repeat;
background-size: 100%; //propotional resize
/*
background-size: 100% 100%; //stretch resize
*/
}
</style>
<div class="divWithBgImage">
some contents
</div>
Ahora funciona también en Chrome – Channel
En cuanto a this artículo, usted debe utilizar cover así:
html {
background: url(PATH_TO_IMAGE) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
leyeron: http://www.whatstyle.net/articles/48/css_tricks_1_100_percent_width_in_a_variable_width_container – diEcho
Puede encuentre información útil en [stackoverflow.com/questions/2083831/css-background-image-does-not-fill-when-scrolling](http://stackoverflow.com/questions/2083831/css-background-image-does- not-fill-when-scrolling) – utsikko