efecto-blurry-imagen-borrosa-css

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

Select Code
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.

Select Code
<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

Si te ha gustado este artículo, puedes recibir gratis más y mejor por RSS, Twitter, Facebook o correo electrónico. ¡Muchas gracias por leerme!

 
Udemy