Característica background-attachment en CSS

La propiedad background-attachment en CSS determina si la posición de la imagen (determinada por la propiedad background-image) es fija dentro de la ventana gráfica o si se pasará cuando el elemento (o página) que la contiene esté suspendido.

Funciones background-attachment en css

Valor inicial	`scroll`
Aplicado a	Todos los artículos.
Heredable	No
Móvil	Sí
Valor calculado	Como el valor especificado.

/ * palabras clave * / 
background-attachment: scroll;
background-attachment: fixed;
background-attachment: local;

/ * valores globales * / 
background-attachment: inherit;
background-attachment: initial;
background-attachment: unset;

Ejemplos

Ejemplo simple del uso de la propiedad background-attachment para hacer que la posición de la imagen de fondo (especificada a través de la propiedad background-image) sea fija.

Código HTML:

< p >
Texto
</ p >

Código CSS:

p {
  background-image: url("image.png");
  background-attachment: fixed;
}

Ejemplo de uso de más de una imagen de fondo ( background-image), con un valor diferente asignado a cada uno por la propiedad background-attachment(estos valores están separados por una coma). Tenga en cuenta que hemos utilizado la propiedad background-repeat para establecer cómo se repetirá la imagen de fondo.

Código HTML:

< div > 
  < p >
    contenido de texto
  </ p > 
  < p >
    contenido de texto
  </ p > 
  < p >
    contenido de texto
  </ p > 
</ div >

Código CSS:

div {
  background-image: url("image-1.png"), url("image-2.png");
  background-attachment: fixed, scroll;
  background-repeat: no-repeat, repeat-y;
}

Soporte de navegadores

Característica	Chrome	Firefox	IE	Ópera	Safari
Soporte principal	1.0	1.0	4	3,5	1.0
Múltiples fondos de pantalla	1.0	3.6	9.0	10,5	1.3

Estructura general

El valor de la propiedad background-attachment es una de las siguientes palabras clave: <attachment>

fixed

La posición del fondo se fija en relación con la ventana gráfica, y si el elemento tiene la capacidad de desplazarse, el fondo no se moverá con el elemento.

local

La imagen de fondo se fija en relación con el contenido del elemento, por lo que si el elemento tiene la capacidad de desplazarse, el fondo se moverá con el contenido del elemento.

scroll

El fondo es estático en relación con el elemento en sí y no se mueve con su contenido.

Estructura formal

background-attachment: <attachment>#;

Los valores se pueden repetir para aplicarlos a más de una imagen de fondo separándolos con una coma (,).

<attachment> = scroll | fixed | local

Ver también

Propiedades de la página incautados por la propiedad de acceso directo background: la background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size.
La página del elemento <img> que se utiliza para agregar imágenes al documento.
Para agregar un color en lugar de una imagen, use el background-color.