Lorsqu'une valeur est définie background-image, la propriété background-attachment définit si la position de l'image est fixée dans la zone d'affichage (viewport) ou si celle-ci défile avec le bloc englobant.

Valeur initialescroll
Applicabilitétous les éléments. S'applique aussi à ::first-letter et ::first-line.
Héritéenon
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

background-attachment: scroll;
background-attachment: fixed;
background-attachment: local;

background-attachment: inherit;

Valeurs

fixed
Ce mot-clé indique que l'arrière-plan est fixe par rapport à la zone d'affichage. Ainsi, même si l'élément dispose d'outils de défilement, l'arrière-plan ciblé ne se déplacera pas avec l'élément.
local
Ce mot-clé indique que l'arrière-plan se déplace avec le contenu de l'élément associé. Ainsi, si l'élément défile, l'arrière-plan défilera avec. Les zones de positionnement et de dessin de l'arrière-plan sont relatives à la zone de l'élément plutôt qu'au cadre extérieur.
scroll
Ce mot-clé indique que l'arrière-plan est fixé par rapport au contenu de l'élément (il ne défile pas avec) mais est rattaché à la bordure de l'élément.

Syntaxe formelle

<attachment>#


<attachment> = scroll | fixed | local

Exemples

Exemple simple

CSS

p {
  background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif");
  background-attachment: fixed;
}

HTML

<p>
  There were doors all round the hall, but they were all locked; and when
  Alice had been all the way down one side and up the other, trying every
  door, she walked sadly down the middle, wondering how she was ever to
  get out again.
</p>

Résultat

Gestion de plusieurs arrière-plans

On peut utiliser cette propriété lorsqu'on travaille avec plusieurs images en arrière-plan. On peut définir, pour chaque image, un background-attachment spécifique. Pour cela, on utilisera une liste, séparée par des virgules. Les images seront associées dans l'ordre à chaque propriété d'attachement.

CSS

p {
  background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"), url("https://mdn.mozillademos.org/files/12059/startransparent.gif");
  background-attachment: fixed, scroll;
  background-repeat: no-repeat, repeat-y;
}

HTML

<p>
  There were doors all round the hall, but they were all locked; and when
  Alice had been all the way down one side and up the other, trying every
  door, she walked sadly down the middle, wondering how she was ever to
  get out again.

  Suddenly she came upon a little three-legged table, all made of solid
  glass; there was nothing on it except a tiny golden key, and Alice's
  first thought was that it might belong to one of the doors of the hall;
  but, alas! either the locks were too large, or the key was too small,
  but at any rate it would not open any of them. However, on the second
  time round, she came upon a low curtain she had not noticed before, and
  behind it was a little door about fifteen inches high: she tried the
  little golden key in the lock, and to her great delight it fitted!
</p>

Résultat

Spécifications

Spécification État Commentaires
CSS Backgrounds and Borders Module Level 3
La définition de 'background-attachment' dans cette spécification.
Candidat au statut de recommandation La propriété a été étendue pour gérer plusieurs arrière-plans et la valeur local.
CSS Level 2 (Revision 1)
La définition de 'background-attachment' dans cette spécification.
Recommendation Aucune modification significative.
CSS Level 1
La définition de 'background-attachment' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Edge Firefox Internet Explorer Opera Safari Servo
Support simple1.0121.043.51.0?
Multiple backgrounds1.0123.69.010.51.3?
local1.012259.010.55.0?
Fonctionnalité Android Chrome for Android Edge Mobile Firefox for Android IE Mobile Opera Mobile Safari Mobile
Support simple(Oui)(Oui)(Oui)1.0(Oui)10.03.2
Multiple backgrounds(Oui)(Oui)(Oui)(Oui)(Oui)10.03.2
local?(Oui)(Oui)25(Oui)??

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, kustolovic, teoli, ShamsGolap, FredB, tregagnon, Mgjbot, Fredchat, Kyodev
 Dernière mise à jour par : SphinxKnight,