Fondo elastico – Redimensionando Proporcional el background

Bueno… los que usan o usaron flash… para hacer sitio web… recordaran que se puede redimensionar el fondo de tu web… dependiendo la rasolucion (o tamaño de la ventana) sin que pierda calidad o se deforme, y bueno ahora intentaremos hacerlo con CSS.

el html no es mas que nuestra imagen que nos servira como background y el resto de nuestro sitio… en este caso aplique un div contenedor de mas para tener un scroll en la ventana…
pueden quitar la opacidad y listo… yo la use para que aprecien el fondo que mola jeje

HTML para redimensionar el fondo

<img src="bg.jpg" class="img_bg" alt="Fondito" />
<div class="all">
<div class="cont">nuestro contenido
</div>
</div>

y nuestro CSS para redimensionar el fondo

* {margin:0;padding:0;position:relative;}
html, body{width:100%;height:100%;overflow:hidden;}
.img_bg{width:100%;height:100%;position:absolute;z-index:1;}
.all{width:100%;height:100%;overflow:auto;left:0;opacity:0.7;top:0;z-index:2;}
.cont{background:#FFF;-moz-opacity:0.7;filter:alpha(opacity=70); width:80%; margin:0 auto;}

Presionen ctrl+scroll(mouse) hacia atras y adelante en FF obien cambien de tamaño su ventana del explorador para que vean el efecto.

Ver demo en linea