Fondos escalables con css y mootools

Escrito por Julián Santacruz | 13 de Junio de 2010

Hace poco me dí a la tarea de buscar en la web, cómo podría implementar en una web un fondo de imagen escalable, de esos que cuando redimensionas la pantalla el fondo crece ó disminuye con ella, bueno lo encontré y quiero compartirlo con ustedes en unos sencillos pasos explicados a continuación, siganlos y el verán el resultado es satisfactorio.

Puedes ver este sencillo demo para que te des una idea de lo que hablo.

Para implementarlo necesitaremos solamente 3 cosas, el core del mootools, el respectivo plugín del efecto y unas líneas de css, al final podrán encontrar todo comprimido.

Necesariamente tenemos que vincular los scripts de mootols, podremos hacerlo poniendo dentro de la etiqueta <head> de nuestro html estos códigos.
```
<script type="text/javascript" src="/mootools-1.2.1-core-nc.js"></script>
<script type="text/javascript" src="/moosized.1.0.js"></script>
```

Luego ingresar estas líneas de html, es nuestro fondo, debe de tener unos selectores específicos para poder que nuestro plugín haga su trabajo.

<div id="supersize">
    <img class="activeslide" src="/tu-fondo.jpg" alt="No te olvides de vincular la imagen y ponerle su respectivo texto alternativo en este espacio" />
</div>

Finalmente ponemos estos estilos que son necesarios para posicionar nuestro fondo.

#supersize { 
	position: fixed; /*puedes poner absolute también*/
	top: 0; 
	left: 0; 
	z-index: -1; /*Depende de la capa dónde esté tu fondo*/}
#supersize img, #supersize a {	
	height:100%;
	width:100%;
	display:none;}
#supersize .activeslide, #supersize .activeslide img{
	display:inline;}

Puedes descargar los recursos completos, estan comprimidos en zip pesan solo 160kb y no tendrás problemas en entender mejor este efecto.