Cuando definimos una imagen de fondo en CSS, podemos indicar su posición (background-position). Pero a mucha gente se le olvida que hay otra propiedad muy interesante llamada background-attachment.
Mediante dos imágenes de fondo podremos crear un efecto de imagen borrosa. El primer fondo, sólido, se coloca debajo del segundo fondo, que es la misma imagen pero borrosa. Para mantener su posición exactamente igual que la posición fija, debemos definir la propiedad background-attachment del div, con el valor fixed.
CSS
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; }
Obviamente necesitamos obtener las imágenes de fondo. En este ejemplo hemos usado estas dos:
Imagen borrosa (blurry).
HTML
Muy sencillo, solo hay que definir el div que posiciona las dos imágenes de fondo, y dentro, poner el texto que queramos, en este caso, un encabezado y un párrafo.
<div id="page-wrap"> <h1>Mi título</h1> <p>Mi párrafo</p> </div>
Ejemplo de su funcionamiento
Podemos ver un ejemplo de su funcionamiento o descargar el ejemplo en .zip.
Estandarización
CSS 2.1 válido.
XHTML 1.0 Strict válido.
Vía | CSS-Tricks
