Imagen de fondo fijo ocupando toda la ventana

Vamos a poner una imagen de fondo en nuestra web haciendo que ocupe toda la venta y que esté fija. La imagen se adaptará automáticamente al tamaño de la ventana, sea cual sea su tamaño.

Dentro de la etiqueta body de la página en cuestión pondremos la imagen de fondo de la siguiente manera:

[body]
[img src=”fondoadaptable.jpg” id=”fondo” /]

[/body]

Debe cambiarse las “[]” por “< >“. Por comodidad y para que no lo interprete como código en este blog hemos puesto [].

Como podemos ver, la imagen tiene asignada la id=”fondo”. Cuando definimos el id “fondo” en la hoja de estilo la definiremos con los siguientes atributos:

#fondo {
position: fixed;
top: 0em;
left: 0em;
z-index: -10;
width:100%;
height:100%;
}

Podemos ver que con los atributos width y height hacemos que la imagen ocupe toda la ventana.
Con los atributos left y top hacemos que se coloque la imagen en el corner superior izquierdo.
El atributo position hará que la imagen se quede fija en el fondo y no se desplace cuando nos movamos con las barras de desplazamiento.
Y el atributo z-index es la que hace que la imagen quede al fondo de todo el contenido.

Mas información que os puede ayudar:

Artículos relacionados

GroundWork CSS – 03 – Framework HTML5 ... Tercer de los 4 vídeos del tutorial de GroundWork, un framework para la creación de página web responsive. En este caso, veremos como crear botones de...
Web Sniffer Para quien no la conozca, os hago llegar una interesante herramienta online encargada de leer los entresijos de una petición web. Cuando en nuestro na...
Algunas Responsive templates Últimas actualizaciones en los recursos de programación. Dos enlaces a Responsive templates, o lo que es lo mismo, plantillas HTML5 y CSS3 que pueden ...
Diseño web con HTML5 y CSS3 Vídeo de 1hora 30 minuts donde nos muestran las novedades de HTML5 y CSS3 Un buen vídeo introductorio a las nuevas especificacions de HTML y CSS

Deja un comentario

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

*