Den background-attachmentejendom i CSS specificerer, hvordan man flytter baggrunden i forhold til viewport.
Der er tre værdier: scroll, fixed, og local. Den bedste måde at forklare dette på er via demo (prøv at rulle de enkelte baggrunde):
Se demo-vedhæftet filbaggrund af Timothy Miller (@tjacobdesign) på CodePen.
Der er to forskellige visninger at tænke på, når vi taler om background-attachment: hovedvisningen (browservindue) og den lokale visning (du kan se dette i demoen ovenfor).
scroller standardværdien. Det ruller med hovedvisningen, men forbliver fast inde i den lokale visning.
fixedforbliver fast uanset hvad. Det er som et fysisk vindue: at bevæge sig rundt i vinduet ændrer dit perspektiv, men det ændrer sig ikke, hvor ting er uden for vinduet.
localblev opfundet, fordi standardværdien scrollfungerer som en fast baggrund. Den ruller både med hovedvisningen og den lokale visning. Der er nogle ret seje ting, du kan gøre med det.
Relaterede
- baggrund-klip
- baggrundsfarve
- baggrundsbillede
- baggrund-oprindelse
- baggrund-position
- baggrund-gentagelse
- baggrundsstørrelse
Flere ressourcer
- CSS3 Spec
- MDN
Browsersupport
Den fixedog scrollværdier understøttes overalt, selv fixedkan opføre sig underligt på mobil. localhar denne browsersupport:
Denne browsersupportdata er fra Caniuse, som har flere detaljer. Et tal angiver, at browseren understøtter funktionen i den version og opefter.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 4 | 25 | 9 | 12 | 5 |
Mobil / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.2-4.3 | 14.0-14.4 |
Chrome-on-Android understøtter local, men den gamle Android-browser gør det ikke.