Imágenes de fondo background adaptadas a todas las resoluciones depantalla

Si bien decía anteriormente que el diseño adaptado a móviles es importante...hoy os traigo un regalito muy útil, se trata de dos formas de establecer una imagen de fondo adaptada para todas las resoluciones de pantalla, hoy en día es algo muy utilizado por los diseñadores web y creo que os podría interesar.


Os explico las dos formas de hacerlo, las cuales podreís realizar una descarga completa de cada uno de los archivos.

Primera forma

Ver Demo | Descargar

La primera forma es muy sencilla, sería introducir el siguiente .js junto con la imagen que queramos establecer como fondo justo debajo de la etiqueta body, además deberemos añadir a la imagen unos estilos, los cuales yo he introducido directamente en el mismo archivo.

Segunda forma

Ver Demo | Descargar

La segunda forma es también muy sencilla, además tienes la posibilidad de poner una sola foto de fondo o bien realizar transiciones con varias imágenes, en este caso yo he realizado una prueba con varias fotos para que vayáis viendo el efecto que realiza. Deberéis descargaros el paquete completo que he puesto con los scripts, css etc... y en el html antes de la etiqueta head deberías añadir otro script en el que se incluyen las fotos que deseamos establecer como fondo.

¡¡A disfrutar de esos diseños tan espectaculares...!!. Cualquier duda comentar y os responderé.