SummArg | Cursos y recursos para webmasters

08/06/2012

Expandir una imagen de fondo para todas las resoluciones con jQuery Backstretch

Colocar una imagen de fondo que se adapte a todas las resoluciones, no es tarea sencilla. Existen algunas propiedades y trucos para aplicar vía CSS, por ejemplo con background-size (que no está soportado por todos los navegadores):

body {
 background: url(images/bg.jpg) no-repeat center center fixed;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
 }

Y un parche para IE que no termina de funcionar del todo bien.

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
 -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

Existen también otras dos técnicas para lograr el truco utilizando sólo CSS y las pueden ver en CSS-Tricks, pero nosotros preferimos jQuery por su alta compatibilidad con todos los navegadores (salvo en aquellos usuarios que javascript esté deshabilitado, cosa muy poco frecuente) y en esta oportunidad nos decantamos por Backstretch, un plugin muy liviano y que se instala de forma simple.

Basta con linkear jQuery y Backstretch antes del cierre de la etiqueta </body> y luego declarar que imagen queremos colocar en el body.

<script src="../lib/jquery.min.js"></script>
 <script src="../jquery.backstretch.min.js"></script>
 <script>
 $.backstretch("pot-holder.jpg");
 </script>

Vale destacar que podemos usar el plugin como slideshow en el background de nuestra página.

Descarga y demo

Dejar un comentario