Una forma sencilla de dar un toque de distinción a nuestro blog o web, es poner una imagen como fondo web que ocupe toda la pantalla. Sin embargo, no todas las pantallas tienen la misma resolución  ya menudo las imágenes se verán recortadas o deformadas, lo cual no es nada deseable desde el punto de vista del diseño web. 

Si queremos solventar este problema de una manera rápida y sin complicaciones lo mejor es usar un plugin jquery/javascript que haga el trabajo por nosotros. En esta entrada voy a recopilar algunos de ellos:

 

Este plugin Jquery nos va a permitir redimensionar la imagen de fondo para adaptarla a cualquier resolución sin deformarla. Ademas, tambien se puede usar para crear una galería a pantalla completa. Su uso es muy sencillo, tan solo tendremos que añadir el archivo js a nuestros archivos de la web, enlazarlo desde nuestro documento html, junto con la imagen que vayamos a usar de background.

 

Vegas background es la alternativa a backstretch. Sus funciones son las mismas (pantalla completa / slider) y su uso es muy similar. Tambien cuenta con licencia MIT lo cual es necesario si lo queremos implementar en un proyecto serio.

 

Si en vez de colocar una imagen queremos ir mas allá, y usar un vídeo como fondo web, este plugin Jquery es la solución. Por supuesto los vídeos serán escalables para que se adapten a la perfección a un diseño responsivo. Ademas, tambien sirve para colocar una única imagen reescalable como hacen los dos anteriores.

 

Otra opción para redimensionar las imágenes de fondo. En este caso el plugin, tambien basado en Jquery, permite añadir opacidad a las imágenes. Se diferencia de los anteriores en que no actúa directamente sobre el fondo, sino que hay que añadir un elemento img para convertirlo en background.

 

Se podría decir que este plugin es una versión mejorada de backstretch puesto que no solo permite redimensionar imágenes, sino que tambien nos da la opción de aplicar el fondo a otros elementos del documento html. Su uso es tambien muy sencillo y en cuanto a licencia, usa una combinación de GPL y MIT por lo que tampoco vamos a tener ningun problema en usarlo en ninguno de nuestros proyectos.

 

 

Estas son las mejores opciones que he encontrado hasta la fecha, si no queremos calentarnos mucho la cabeza. Ahora bien, si no vamos sobrados de recursos y queremos usar CSS o directamente Javascript tambien podemos hacerlo nosotros mismos programando. 

 

Eso es todo por hoy, espero que os haya gustado mi primera entrada y animo con las webs!