CSS Tricks nos acerca un completo tutorial de como implementar via CSS un “Fondo borroso” a nuestro site.

La implementación es mucho mas simple de lo que cualquiera puede pensar, solo necesitamos disponer de dos imágenes.

En si lo que se usa son como ya lo dije dos imáges en el background, la imagen principal esta incrustada en el elemento body, y lo “borroso” esta dispuesto por medio de un div wrap, para este caso. El hack dispone que la imagen borrosa se posicione correctamente dentro del div con CSS. Por lo que seria algo así:


body {
background: url(images/bg-solid.jpg) no-repeat;
}

#page-wrap {
background: url(images/bg-blurry.jpg) no-repeat fixed;
width: 500px; margin: 40px auto;
}

Una ves que entendimos básicamente como funciona, solo nos limita nuestra imaginación a lo que podemos llegar a lograr con este efecto.