Imagen de fondo web a pantalla completa, Background Full Screen CSS3

enero 30, 2014 | Html5 & Css3, Recursos

poner una imagen a pantalla completa, o también llamado background full screen es un efecto que últimamente esta siendo muy usada por diversos sitios web, de seguro ya habrás visto uno por la web.

bueno ese efecto es muy simple, tan simple que solo se hace con css3, agregándole algunos atributos al elemento html.


html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Funciona a partir de las versiones de los siguientes navegadores:

  • Safari 3+
  • Chrome
  • IE 9+
  • Opera 10+
  • Firefox 3.6+

este ejercicio es muy simple, aca dejo la demo y la descarga de los archivos en un rar, contraseña: antocas.com espero sirva de ayuda y consideren este efecto en sus próximos efectos.

Relacionados