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:

Información relacionada

Deja un comentario

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

*