Propriété CSS `background-attachment`

Baseline Large disponibilité *

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

Want more support for this feature? Tell us why.

* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.

En savoir plus
Voir la compatibilité complète

La propriété CSS background-attachment définit si la position d'une image d'arrière-plan est fixe par rapport à la zone d'affichage, ou si elle défile avec son bloc englobant.

Exemple interactif

background-attachment: scroll;

background-attachment: fixed;

background-attachment: local;

background-attachment: fixed, scroll;

background-attachment: scroll, fixed;

<section id="default-example">
  <div id="example-element">
    <p>
      D'ici à là<br />
      de là à ici,<br />
      Des choses amusantes<br />
      Sont partout.
    </p>
    <p>--Dr. Seuss</p>
  </div>
</section>

body {
  overflow: scroll;
}

#default-example {
  height: 600px;
}

#example-element {
  max-width: 20rem;
  height: 100%;
  background:
    url("/shared-assets/images/examples/lizard.png") right 3rem top 1rem / 15rem
      no-repeat,
    url("/shared-assets/images/examples/moon.jpg") center / 10rem;
  font-size: 1.2rem;
  font-weight: bolder;
  overflow: auto;
  padding: 20px;
  color: red;
  text-shadow:
    0 0 0.5rem black,
    0 0 0.5rem black;
}

Syntaxe

css

/* Valeurs avec un mot-clé */
background-attachment: scroll;
background-attachment: fixed;
background-attachment: local;

/* Valeurs globales */
background-attachment: inherit;
background-attachment: initial;
background-attachment: revert;
background-attachment: unset;

La propriété background-attachment est définie avec un ou plusieurs mots-clés de la liste suivante, séparés par des virgules.

Valeurs

fixed: Ce mot-clé indique que l'arrière-plan est fixe par rapport à la zone d'affichage (viewport en anglais). Même si un élément dispose d'un mécanisme de défilement, l'arrière-plan ne se déplace pas avec l'élément. Si cette valeur est définie, la propriété background-origin est ignorée.
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.

Définition formelle

Valeur initiale	`scroll`
Applicabilité	tous les éléments. S'applique aussi à `::first-letter` et `::first-line`.
Héritée	non
Valeur calculée	comme défini
Type d'animation	discrète

Syntaxe formelle

background-attachment = 
  <attachment>#  

<attachment> = 
  scroll  |
  fixed   |
  local

Exemples

Exemple simple

HTML

Nous incluons une liste non ordonnée (<ul>) avec quelques éléments de liste (<li>).

html

<ul>
  <li>Un poisson</li>
  <li>Deux poissons</li>
  <li>Poisson rouge</li>
  <li>Poisson bleu</li>
  <li>Poisson noir</li>
  <li>Poisson bleu</li>
  <li>Vieux poisson</li>
  <li>Nouveau poisson.</li>
  <li>Celui-ci a une petite étoile.</li>
  <li>Celui-ci a une petite voiture.</li>
  <li>Dis&nbsp;! Quel lot</li>
  <li>De poissons il y a.</li>
</ul>

CSS

Nous définissons une image de fond (background-image) et réglons la propriété background-attachment sur fixed. Nous incluons également une height, une width et un débordement (overflow) pour garantir que l'élément défile.

css

ul {
  background-image: url("star-solid.gif");
  background-attachment: fixed;

  width: 300px;
  height: 70px;
  overflow: scroll;
}

Résultat

Notez comment l'arrière-plan reste fixe par rapport à la zone d'affichage de la liste lorsque vous faites défiler le texte débordant.

Gestion de plusieurs arrière-plans

Cette propriété prend en charge plusieurs images d'arrière-plan. Vous pouvez définir une valeur <attachment> différente pour chaque image, séparées par des virgules. Chaque image est associée au type <attachment> correspondant, de la première à la dernière.

HTML

Nous incluons tout le poème de Dr. Seuss.

html

<div>
  <ul>
    <li>Un poisson</li>
    <li>Deux poissons</li>
    <li>Poisson rouge</li>
    <li>Poisson bleu</li>
    <li>Poisson noir</li>
    <li>Poisson bleu</li>
    <li>Vieux poisson</li>
    <li>Nouveau poisson.</li>
    <li>Celui-ci a une petite étoile.</li>
    <li>Celui-ci a une petite voiture.</li>
    <li>Dis&nbsp;! Quel lot</li>
    <li>De poissons il y a.</li>
    <li>Oui. Certains sont rouges. Et certains sont bleus.</li>
    <li>Certains sont vieux. Et certains sont nouveaux.</li>
    <li>Certains sont tristes.</li>
    <li>Et certains sont joyeux.</li>
    <li>Et certains sont très, très mauvais.</li>
    <li>Pourquoi sont-ils</li>
    <li>Tristes et joyeux et mauvais&nbsp;?</li>
    <li>Je ne sais pas.</li>
    <li>Allez demander à votre père.</li>
    <li>Certains sont maigres.</li>
    <li>Et certains sont gros.</li>
    <li>Le gros a</li>
    <li>Un chapeau jaune.</li>
    <li>De là à ici, d'ici à là,</li>
    <li>Des choses amusantes</li>
    <li>Sont partout.</li>
  </ul>
  <p>--Dr. Seuss</p>
</div>

CSS

Nous incluons une height, une width et un overflow sur le parent <div> pour garantir que le contenu défile.

Nous définissons deux images d'arrière-plan séparées par des virgules sur la liste, et réglons la propriété background-attachment sur fixed, scroll, ce qui signifie que la première image d'arrière-plan sera fixed et la seconde sera scroll. Nous réglons la propriété background-repeat pour que les deux images d'arrière-plan se répètent verticalement, en les séparant avec la propriété background-position.

css

div {
  width: 300px;
  height: 200px;
  overflow: scroll;
}
ul {
  background-image: url("star-solid.gif"), url("star-transparent.gif");
  background-attachment: fixed, scroll;
  background-repeat: repeat-y;
  background-position:
    0 0,
    100px 0;
}

Résultat

Notez comment la première image d'arrière-plan est fixe par rapport à la zone d'affichage tandis que la seconde image d'arrière-plan est fixe par rapport à la liste.