Imagen de fondo fijo ocupando toda la ventana web

Publicada el por

Cómo poner una imagen de fondo fijo ocupando toda la página de nuestro navegador web.

Tutoriales programación web

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 [].

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

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:

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.

Con este ejemplo, podréis poner una imagen de fondo fijo de vuestra web.

Mas información que os puede ayudar: