Den background-attachmenteiendom i CSS spesifiserer hvordan du flytter bakgrunnen i forhold til synsfeltet.
Det er tre verdier: scroll, fixedog local. Den beste måten å forklare dette på er via demo (prøv å bla i de enkelte bakgrunnene):
Se Pen bakgrunn vedlegg demo av Timothy Miller (@tjacobdesign) på CodePen.
Det er to forskjellige visninger å tenke på når du snakker om background-attachment: hovedvisningen (nettleservinduet) og den lokale visningen (du kan se dette i demoen ovenfor).
scroller standardverdien. Den ruller med hovedvisningen, men holder seg fast inne i lokalvisningen.
fixedholder seg fast uansett hva. Det er som et fysisk vindu: å bevege seg rundt vinduet endrer perspektivet ditt, men det endres ikke der ting er utenfor vinduet.
localble oppfunnet fordi standardverdien scrollfungerer som en fast bakgrunn. Den ruller både med hovedvisningen og den lokale visningen. Det er noen ganske kule ting du kan gjøre med det.
I slekt
- bakgrunn-klipp
- bakgrunnsfarge
- bakgrunnsbilde
- bakgrunn-opprinnelse
- bakgrunn-posisjon
- bakgrunn-gjenta
- bakgrunnsstørrelse
Flere ressurser
- CSS3 spesifikasjon
- MDN
Nettleserstøtte
Den fixedog scrollverdier støttes overalt, men fixedkan oppføre seg merkelig på mobil. localhar denne nettleserstøtten:
Disse nettleserstøttedataene er fra Caniuse, som har flere detaljer. Et tall indikerer at nettleseren støtter funksjonen i den versjonen og oppover.
Desktop
| Chrome | Firefox | DVS | Kant | Safari |
|---|---|---|---|---|
| 4 | 25 | 9 | 12 | 5 |
Mobil / nettbrett
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.2-4.3 | 14.0-14.4 |
Chrome-on-Android støtter local, men den gamle Android-nettleseren gjør det ikke.