La background-attachmentpropiedad en CSS especifica cómo mover el fondo en relación con la ventana gráfica.
Hay tres valores: scroll, fixed, y local. La mejor manera de explicar esto es a través de una demostración (intente desplazarse por los fondos individuales):
Vea la demostración adjunta de Pen Background de Timothy Miller (@tjacobdesign) en CodePen.
Hay dos vistas diferentes en las que pensar cuando se habla background-attachment: la vista principal (ventana del navegador) y la vista local (puede ver esto en la demostración anterior).
scrolles el valor predeterminado. Se desplaza con la vista principal, pero permanece fijo dentro de la vista local.
fixedpermanece fijo pase lo que pase. Es como una ventana física: moverse alrededor de la ventana cambia tu perspectiva, pero no cambia dónde están las cosas fuera de la ventana.
localse inventó porque el scrollvalor predeterminado actúa como un fondo fijo. Se desplaza tanto con la vista principal como con la vista local. Hay algunas cosas muy interesantes que puedes hacer con él.
Relacionado
- clip de fondo
- color de fondo
- imagen de fondo
- origen de fondo
- posición de fondo
- repetición de fondo
- tamaño de fondo
Más recursos
- Especificación CSS3
- MDN
Soporte del navegador
Los valores fixedy scrollse admiten en todas partes, aunque fixedpueden comportarse de forma extraña en dispositivos móviles. localtiene este navegador compatible:
Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.
Escritorio
| Cromo | Firefox | ES DECIR | Borde | Safari |
|---|---|---|---|---|
| 4 | 25 | 9 | 12 | 5 |
Móvil / Tablet
| Android Chrome | Android Firefox | Androide | Safari de iOS |
|---|---|---|---|
| 88 | 85 | 4.2-4.3 | 14.0-14.4 |
Chrome en Android es compatible local, pero el antiguo navegador de Android no.