Imagen como fondo de pagina web con tamaño ajustable

Vamos a explicar como utilizando CSS podemos colocar una imagen como fondo de nuestra web y que el tamaño de dicha imagen se ajuste automáticamente a la resolución de cada monitor o al tamaño de la ventana del explorador. El resultado no es perfecto pero es un método bastante sencillo.


 Lo primero una consideración sobre las imágenes a utilizar y es que como van  a cubrir toda la pantalla manteniendo su proporción pues nos encontramos que teniendo en cuenta las pantallas anchas actuales será mejor usar imágenes de tipo rectangular en lugar de cuadradas. Para utilizar una imagen cuadrada deberemos asegurarnos que lo que deseamos que se vea quede justo en el centro.



Veamos ejemplos de imágenes en pantallas con lo que entenderemos mucho mejor el problema:

Aquí utilizamos una imagen cuadrada y aparece el problema que queremos evitar. Para ajustarse a cubrir todo el ancho en una pantalla widescreen la imagen tendría que desaparecer por arriba y por abajo con lo que el resultado no es el deseado

En este segundo caso la imagen que utilizamos es mucho más ancha y al cubrir el alto de la pantalla se sale por los extremos pero puesto que lo importante de la imagen está en el centro nos puede servir perfectamente

La imagen del caso anterior vemos como también nos podría servir si se utiliza una pantalla cuadrada

Asi pues por lo tanto las mejores imágenes a utilizar para que se visualicen más o menos de manera similar en todo tipo de pantallas serán imágenes rectangulares en las que lo que principalmente deseamos que aparezca se encuentre en la parte central. 

En el caso de que la imagen no sea un logotipo sino una foto como por ejemplo de un paisaje que no se puede "ensanchar" con un color fijo sin hacer una chapuza pues deberíamos recortarla para ajustarla a esa proporción dejando en el centro lo fundamental de la imagen para que sea visible en todo tipo de pantallas.

---

Aclarado el tema de la imagen vamos ahora con el código CSS para fijarla como fondo de pantalla que añadiremos en el archivo css de nuestra web. Por supuesto debemos sustituir "Imagen.png" por la URL correspondiente a nuestra imagen.

html {
     background: url (Imagen.png) no-repeat fixed center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }

Y podemos comprobar como la imagen de fondo se ajusta de manera automática al tamaño de la ventana de nuestro explorador o de la pantalla donde se visualice sea cual sea.