CSSBlog ES - /* El mejor recurso para enriquecer tu estilo */

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 sólida.

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