Background-attachment - Astuces CSS

La background-attachmentpropriété en CSS spécifie comment déplacer l'arrière-plan par rapport à la fenêtre.

Il y a trois valeurs: scroll, fixedet local. La meilleure façon d'expliquer cela est via une démo (essayez de faire défiler les arrière-plans individuels):

Voir la démonstration de la pièce jointe Pen Background par Timothy Miller (@tjacobdesign) sur CodePen.

Il y a deux vues différentes à considérer lorsque vous parlez background-attachment: la vue principale (fenêtre du navigateur) et la vue locale (vous pouvez le voir dans la démo ci-dessus).

scrollest la valeur par défaut. Il défile avec la vue principale, mais reste fixe dans la vue locale.

fixedreste fixe quoi qu'il arrive. C'est un peu comme une fenêtre physique: se déplacer dans la fenêtre change votre perspective, mais cela ne change pas où les choses se trouvent en dehors de la fenêtre.

locala été inventé parce que la scrollvaleur par défaut agit comme un arrière-plan fixe. Il défile à la fois avec la vue principale et la vue locale. Il y a des choses assez cool que vous pouvez faire avec.

En rapport

clip de fond
Couleur de l'arrière plan
image de fond
background-origin
position de fond
Répétition du fond
taille de fond

Plus de ressources

Spécification CSS3
MDN

Prise en charge du navigateur

Les valeurs fixedet scrollsont prises en charge partout, bien qu'elles fixedpuissent se comporter de manière étrange sur mobile. locala ce support de navigateur:

Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.