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

Overflow vertical en html Si tenemos una capa 'div' con unas determinadas medidas, nos puede interesar que si su contenido sobrepasa la capa que lo contiene, se muestren unas b...
Frameworks HTML5 Open Source para crear app/webs m... Listado de algunos Frameworks HTML5 Open Source por si os planteáis crear aplicaciones para móvil: Bootstrap Kendeo UI TopCoat Intel's App...
Optimización página web – Paso 2 – Accesibilidad... Como mas accesible sea la web, el Sr. Google mas nos valora. Para seguir las normas de accesibilidad, hay que cumplir algunas normas que en el siguien...
HTML 5 Qué es Html5 ? Es la quinta revisión que se hace del lenguaje de etiquetas HTML. Se hará en paralelo tanto el HTML5 como el XHTML5. La sinta...

Deja un comentario

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

*