html - tamaño - expandir imagen css
CSS: ¿estira la imagen de fondo al 100% de ancho y alto de la pantalla? (4)
Debes establecer la altura de html en 100%
body {
background-image:url("../images/myImage.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
}
html {
height: 100%
}
Tengo una imagen llamada myImage.jpg. Este es mi CSS:
body {
background-image:url("../images/myImage.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
}
Por alguna razón, cuando hago esto, el ancho de myImage se extiende por toda la pantalla, pero la altura solo se extiende hasta la altura de todo lo demás en la página. Entonces si pongo un montón de
<br>
en mi página html, entonces la altura aumentará. Si mi página HTML consiste solo en
<div id=''header''>
<br>
</div>
entonces la altura de la imagen de fondo sería la altura de uno
<br>
¿Cómo hago que el alto de mi imagen de fondo sea el 100% de la pantalla que el usuario está usando para ver la página web?
La unidad vh se puede usar para llenar el fondo de la ventana gráfica, también conocida como la ventana del navegador. (height:100vh;)
html{
height:100%;
}
.body {
background: url(image.jpg) no-repeat center top;
background-size: cover;
height:100vh;
}
Yo recomendaría background-size: cover; si no quieres que tu fondo pierda sus proporciones: JS Fiddle
html {
background: url(image/path) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Fuente: http://css-tricks.com/perfect-full-page-background-image/
html, body {
min-height: 100%;
}
Hará el truco.
De forma predeterminada, incluso html y body son solo tan grandes como el contenido que tienen, pero nunca más que el ancho / alto de las ventanas. Esto a menudo puede conducir a resultados bastante extraños.
También es posible que desee leer http://css-tricks.com/perfect-full-page-background-image/
Hay algunas formas excelentes de lograr una imagen de fondo completa muy buena y escalable.