| Sintaxis: | background-attachment: <valor> |
|---|---|
| Valores posibles: | scroll | fixed |
| Valor inicial: | scroll |
| Se aplica a: | Todos los elementos |
| Heredado: | No |
La propiedad background-attachment se utiliza para controlar como se comportan las imágenes de fondo al desplazar ( scroll ) la página, en otras palabras, si la background image (imagen de fondo) especificada se desplazará con el contenido o será fija con respecto al lienzo.
Por ejemplo, la línea siguiente especifica una imagen de fondo fija:
BODY { background: white url(candybar.gif);
background-attachment: fixed }Los autores también pueden usar la foma rápida de la propiedad background, que está mejor soportada que la propiedad background-attachment.
Puede tomar uno de estos valores:
- scroll: la imagen de fondo esta fija relativamente al elemento y no se desplaza cuando el contenido lo hace. Sin embargo se desplaza con la ventana junto con el elemento contenedor.
- fixed: la imagen de fondo esta fija relativamente al viewport y no se mueve al desplazar el contenido del elemento. También queda fija al desplazar la ventana.
- local: si el elemento tiene barras de desplazamiento la imagen se desplaza con el contenido al hacer scroll.
.scroll {
background-attachment: scroll;
}
.fixed {
background-attachment: fixed;
}
.local {
background-attachment: local;
}
Ejemplos
Vea todos estos ejemplos en Codepen:
See the Pen background-attachment**** by Gabi (@enxaneta) on CodePen.
