Cuando utilizamos CSS para colocar una imagen de fondo podemos controlar su posición con la propiedad background-position, pero existe otra propiedad que los diseñadores suelen olvidar: background-attachment.
Con background-attachment podemos controlar la posición de la imagen, logrando con CSS un efecto de div borroso sobre un fondo colorido y nítido. El problema y el centro de este mini tutorial es que el div borroso y el fondo tienen la misma imagen… Un truco CSS simple para darle a nuestra web un toque extra.
El truco consiste en que estamos utilizando dos imágenes de fondo distintas. La versión completa a color se posiciona en el elemento body, mientras que la versión borrosa se coloca en el div del contenido principal.
Para lograr mantenerlas posicionadas exactamente iguales de forma fija, hay que programar la propiedad background-attachment del div en “fixed”:
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;
}
Para entender un poco más cómo funciona, la imagen de los creadores de este truco: CSS Tricks.
En la primera vemos el fondo estático y el div con la visualización de la página en pantalla completa. En la segunda imagen vemos una visualización más pequeña de la página y el div desplazado hacia la izquierda. Aún así, la posición de la imagen borroso se mantiene igual al fondo:
Martes, 24 de Febrero de 2009 a las 12.13
podrías decirme como llego a la opción del #page-wrap , uso visual studio .net pero no tengo mucha experiencia
Miércoles, 25 de Febrero de 2009 a las 13.21
#page-wrap no es una opción, es un selector CSS, para ello debes tener claro como trabajan los selectores, te recomiendo buscar el google. No es dificil entender, saludos.
Viernes, 7 de Mayo de 2010 a las 19.42
Necesito crear un fondo no se si es con CSS pero es éste difuminado que tienes en esta pagina que hace ver profunda el contenido de la misma.
Favor cualquier ayuda me indicas