Hoy nos gustaría explicaros como hacer una página HTML a toda pantalla utilizando los DIV y los CSS. La verdad es que siempre ha sido muy difícil encontrar la correcta solución, es decir, en muchos tutorials encontramos como hacer una página fullscreen pero no responsive, o fullscreen y responsive pero no centrada… pues hemos decidido de escribir un post sobre este tema.
Aquí podéis ver el resultado final.
Gracias al uso de CSS3 y del valor cover podemos aplicar la imagen a todo el background.
-
html {
-
background: url(../images/mybackground.jpg) no-repeat center center fixed;
-
-webkit-background-size: cover;
-
-moz-background-size: cover;
-
-o-background-size: cover;
-
background-size: cover;
-
-ms-filter: “progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’../images/mybackground.jpg’, sizingMethod=’scale’)”;
-
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’…/images/mybackground.jpg’, sizingMethod=’scale’);
-
}
Analizando el código podemos ver como gracias al valor cover podemos aplicar la imagen al fondo de toda la página sin tener que escribir lineas y lineas de código.
Antes había que definir el ancho, el alto automático, un valor mínimo, etc… ahora es algo bastante más sencillo.
Si damos un vistazo al código veremos que hay distintas líneas y propiedad que pero hacen todas lo mismo, o sea definir el valor cover y aplicarlos varios hack (arreglos de compatibilidad) para los distintos browser.
Si quieres saber más de HTML y CSS y estas empezando os recomiendo un curso de 24 horas donde resumo lo que ha pasado en 10 años y además enseño a crear páginas web, tiendas online, mailing, banners etc… próximo workshop en septiembre y las plazas son limitadas!
