Imagen de fondo web adaptable a cualquier resolucion

Dar un toque elegante a una pagina es importante, puedes usar una imagen como fondo web, pero no olvides que cada imagen tiene unas proporciones, y que existen pantallas de diversas resoluciones. Para que la imagen no se deforme al cambiar el tamaño de la ventana o la resolución existen varias opciones, cada una de las cuales tiene sus pros y sus contras. Vamos a ver tres opciones: CSS, Javascript y un plugin Jquery.

CSS

Lo mas sencillo, es usar CSS. Y lo haremos con la propiedad background-size y su valor cover, el cual redimensiona automáticamente la imagen al variar el tamaño de la ventana.

El problema de realizar esta operación con CSS, es que no funciona con los navegadores anteriores a IE9. Deberemos usar las otras opciones.

Javascript

Aquí, deberemos de seguir tres sencillos pasos.

Jquery Usaremos este plugin: http://srobbin.com/jquery-plugins/backstretch/

Para cualquiera de las dos ultimas opciones es interesante incluir esta meta:

Saca tu conclusión…

 

facebook Imagen de fondo web adaptable a cualquier resoluciontwitter Imagen de fondo web adaptable a cualquier resoluciongoogle Imagen de fondo web adaptable a cualquier resoluciondiggit Imagen de fondo web adaptable a cualquier resolucionpinterest Imagen de fondo web adaptable a cualquier resolucionlinkedin Imagen de fondo web adaptable a cualquier resolucionprint Imagen de fondo web adaptable a cualquier resolucionemail Imagen de fondo web adaptable a cualquier resolucionSi te gusto, comparte el articulo.

Artículos Relacionados

Agregar comentario


*

Recibe nuestro newsletter

Suscribete a nuestro newsletter y mantente informado con nuestros últimos artículos, noticias y más. Todo completamente gratis.