CSS: ¿ancho y fondo del 100%?

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%?

Fuente

2012-08-23 micobg

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

Utilice el fondo de ancho mínimo: 960px; en lugar de ancho: 100%; Cheers

Fuente

2012-08-23 14:08:59

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>

Fuente

2012-08-24 12:33:17 Jay

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; 
}

Fuente

2016-05-17 19:15:04

CSS: ¿ancho y fondo del 100%?

Respuesta

Cuestiones relacionadas