Saltar al contenido

CSS: ¿estirar la imagen de fondo al 100% del ancho y alto de la pantalla?

Solución:

Necesitas establecer la altura de html para 100%

body {
    background-image:url("../images/myImage.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
html {
    height: 100%
}

http://jsfiddle.net/8XUjP/

yo recomendaria 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.

Por defecto, incluso html y body son tan grandes como el contenido que contienen, pero nunca más que el ancho / alto de las ventanas. Esto a menudo puede dar lugar a resultados bastante extraños.

También puede 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.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *