martes, 5 de marzo de 2013

Background-Image “fullscreen” ajustable a Ventana con CSS3

Método para crear un efecto fullscreen de una imágen usada como fondo sin necesidad de utilizar javascript. Para ello solo vamos a utilizar CSS y su propiedad background-size: cover.

La propiedad "background-size: cover" nos permite escalar el tamaño de las imágenes de fondo (background), en lugar de el comportamiento predeterminado del mosaico de la imagenes.

* para su visualización correcta requiere o bien un navegador basado en Gecko, WebKit (Safari y Google Chrome, por ejemplo) y Opera.

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

DEMO DESCARGAR



No hay comentarios:

Publicar un comentario

Cambiar tamaño de fuente al reducir la ventana (HTML / CSS)

Cambiar el tamaño del texto a medida que se reduce el tamaño de la ventana (HTML5 / CSS3)   . container { border : solid 1px blue ; ...