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

Cómo crear una página “en construcción”... Damos de alta el hosting, los emails, ... y ahora toca algo que parece muy sencillo, crear una página temporal que mostraremos mientras no colgamos la...
jsPDF y Responinator Hemos añadido a recursos de programación dos nuevas herramientas: Por un lado jsPDF, un librería de JavaScript que permite crear documentos PDF desde...
jQuery ejemplos menus y manejo de tablas Para los que utilicen la librería jQuery para JavaScript, os puede interesar estos dos enlaces con un listado de ejemplos de: Menús desplegable...
GroundWork CSS – 02 – Framework HTML5 ... Segundo vídeo que muestro cómo estructurar una página web responsive para que se muestre de forma correcta en web y en dispositivos móviles. ...

Deja un comentario

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

*