W3docs
fr
Se connecter

Propriété CSS background-attachment

La propriété CSS background-attachment définit si une image d'arrière-plan défile avec la page, reste fixe ou défile avec le contenu de l'élément.

La propriété background-attachment définit si une image d'arrière-plan reste fixe ou défile avec le reste de la page. Elle contrôle comment l'image se comporte lorsque l'utilisateur fait défiler la page — un petit détail qui est l'ingrédient clé derrière des effets comme les bannières fixes et le parallaxe en CSS pur.

Cette page explique chaque valeur, quand les utiliser, et le piège à éviter (mobile) qui surprend souvent les développeurs.

Valeurs

background-attachment accepte cinq valeurs :

  • scroll (par défaut) — l'arrière-plan est fixé à l'élément, il ne bouge donc pas lorsque le contenu propre de l'élément défile, mais il bouge lorsque la page défile. En pratique, il se comporte comme « défile avec la page ».
  • fixed — l'arrière-plan est fixé au viewport. Il reste en place pendant que tout le reste défile, de sorte que le contenu semble glisser sur une image stationnaire. C'est ce qui crée l'effet classique parallaxe / bannière hero.
  • local — l'arrière-plan est fixé au contenu de l'élément. Lorsque vous faites défiler l'intérieur d'un élément avec défilement (overflow: auto), l'arrière-plan défile avec ce contenu.
  • initial — réinitialise la propriété à sa valeur par défaut (scroll).
  • inherit — hérite de la valeur de l'élément parent.

La différence entre scroll et local n'apparaît que sur un élément possédant sa propre barre de défilement. Sur une page à défilement normal, ils se ressemblent.

En JavaScript, le nom de la propriété DOM est en camelCase : element.style.backgroundAttachment.

Valeur initialescroll
S'applique àTous les éléments. S'applique également à ::first-letter et ::first-line.
HéritageNon.
AnimatableNon.
VersionCSS1
Syntaxe DOMobject.style.backgroundAttachment = "scroll";

Syntaxe

Syntaxe de la propriété CSS background-attachment

background-attachment: scroll | fixed | local | initial | inherit;

Exemple de la propriété background-attachment avec la valeur "scroll" :

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      body {
        background-image: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png");
        background-repeat: no-repeat;
        background-attachment: scroll;
        background-size: 400px 100px;
      }
      .scroll-container {
        height: 300px;
        overflow: auto;
        border: 1px solid #ccc;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <h2>background-attachment example</h2>
    <div class="scroll-container">
      <p>The background-image scrolls with the viewport. Try to scroll down.</p>
      <p>More content to demonstrate scrolling...</p>
      <p>Keep scrolling...</p>
      <p>Almost there...</p>
      <p>End of content.</p>
    </div>
    <p>If you do not see any scrollbars, try to resize the browser window.</p>
  </body>
</html>
Essayez vous-même »

Dans l'exemple suivant, l'image d'arrière-plan est « fixe » et ne se déplace pas avec la page.

Exemple de la propriété background-attachment avec la valeur "fixed" :

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      body {
        background-image: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: 400px 100px;
      }
      .scroll-container {
        height: 300px;
        overflow: auto;
        border: 1px solid #ccc;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <h2>background-attachment example</h2>
    <div class="scroll-container">
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>More content to demonstrate scrolling...</p>
      <p>Keep scrolling...</p>
      <p>Almost there...</p>
      <p>End of content.</p>
    </div>
    <p>If you do not see any scrollbars, try to resize the browser window.</p>
  </body>
</html>
Essayez vous-même »

Exemple de la propriété background-attachment avec la valeur "local" :

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .local-container {
        height: 300px;
        overflow: auto;
        border: 1px solid #ccc;
        padding: 10px;
        background-image: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png");
        background-repeat: no-repeat;
        background-attachment: local;
        background-size: 400px 100px;
      }
    </style>
  </head>
  <body>
    <h2>background-attachment example</h2>
    <div class="local-container">
      <p>The background-image scrolls with the element's contents, not the viewport. Try to scroll down.</p>
      <p>More content to demonstrate scrolling...</p>
      <p>Keep scrolling...</p>
      <p>Almost there...</p>
      <p>End of content.</p>
    </div>
    <p>If you do not see any scrollbars, try to resize the browser window.</p>
  </body>
</html>
Essayez vous-même »

Exemple de la propriété background-attachment avec une image d'arrière-plan fixe et background-size: cover :

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .example {
        background-image: url("/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg");
        min-height: 500px;
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
      }
    </style>
  </head>
  <body>
    <h2>background-attachment example</h2>
    <p>Scroll the page to see the effect.</p>
    <div class="example"></div>
    <div style="height:800px;background-color:#1c87c9;"></div>
  </body>
</html>
Essayez vous-même »

Quand utiliser chaque valeur

  • Utilisez fixed lorsque vous souhaitez une image hero ou un arrière-plan pleine page qui reste immobile pendant que le contenu défile par-dessus — c'est le moyen le plus simple d'obtenir un effet de type parallaxe sans JavaScript.
  • Utilisez local lorsqu'une boîte avec défilement (un panneau de chat, une liste de code, une carte avec overflow: auto) doit garder son arrière-plan collé au contenu qui défile plutôt qu'à la boîte elle-même.
  • Laissez scroll pour les arrière-plans de page ordinaires qui doivent se déplacer naturellement avec la page.

Piège : fixed sur mobile

background-attachment: fixed est mal pris en charge par les navigateurs mobiles — notamment iOS Safari, où il affiche l'image étirée ou désactive entièrement le comportement fixe pour des raisons de performances. Si vous avez besoin d'un effet parallaxe fiable sur mobile, utilisez plutôt un élément en position fixe séparé au lieu de vous fier à cette propriété. Testez toujours les arrière-plans fixes sur un vrai appareil tactile.

Parce que la propriété peut forcer le navigateur à repeindre l'arrière-plan à chaque image de défilement, l'utilisation excessive de fixed sur de grandes images peut également nuire aux performances de défilement.

Propriétés associées

background-attachment est généralement définie avec d'autres propriétés d'arrière-plan :

Exercice

Pratique
Lesquelles des valeurs suivantes sont valides pour la propriété CSS background-attachment ?
Lesquelles des valeurs suivantes sont valides pour la propriété CSS background-attachment ?
Was this page helpful?