W3docs
de
Anmelden

CSS background-attachment Eigenschaft

Die CSS-Eigenschaft background-attachment legt fest, ob ein Hintergrundbild mit der Seite scrollt, fixiert bleibt oder mit dem Elementinhalt scrollt.

Die Eigenschaft background-attachment legt fest, ob ein Hintergrundbild an seiner Position verbleibt oder zusammen mit dem Rest der Seite scrollt. Sie steuert, wie das Bild sich beim Scrollen verhält — ein kleines Detail, das der Schlüssel zu Effekten wie fixierten Bannern und CSS-Only-Parallax ist.

Diese Seite erklärt jeden Wert, wann man welchen einsetzt, und den einen Fallstrick (Mobil), der immer wieder zu Problemen führt.

Werte

background-attachment akzeptiert fünf Werte:

  • scroll (Standard) — der Hintergrund ist am Element fixiert, bewegt sich also nicht, wenn der eigene Inhalt des Elements scrollt, scrollt aber mit, wenn die Seite scrollt. In der Praxis verhält es sich wie „scrollt mit der Seite."
  • fixed — der Hintergrund ist am viewport fixiert. Er bleibt stehen, während alles andere scrollt, sodass der Inhalt über ein stehendes Bild zu gleiten scheint. Dies erzeugt den klassischen Parallax-/Hero-Banner-Look.
  • local — der Hintergrund ist am Elementinhalt fixiert. Wenn innerhalb eines scrollbaren Elements (overflow: auto) gescrollt wird, scrollt der Hintergrund gemeinsam mit dem Inhalt.
  • initial — setzt die Eigenschaft auf ihren Standardwert zurück (scroll).
  • inherit — übernimmt den Wert des Elternelements.

Der Unterschied zwischen scroll und local ist nur bei einem Element mit eigenem Scrollbalken sichtbar. Auf einer normal scrollenden Seite sehen beide gleich aus.

In JavaScript lautet der DOM-Eigenschaftsname in camelCase: element.style.backgroundAttachment.

Anfangswertscroll
Gilt fürAlle Elemente. Gilt auch für ::first-letter und ::first-line.
VererbbarNein.
AnimierbarNein.
VersionCSS1
DOM-Syntaxobject.style.backgroundAttachment = "scroll";

Syntax

Syntax der CSS-Eigenschaft background-attachment

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

Beispiel der background-attachment-Eigenschaft mit dem Wert "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>
Probier es selbst »

Im folgenden Beispiel ist das Hintergrundbild „fixed" und bewegt sich nicht mit der Seite.

Beispiel der background-attachment-Eigenschaft mit dem Wert "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>
Probier es selbst »

Beispiel der background-attachment-Eigenschaft mit dem Wert "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>
Probier es selbst »

Beispiel der background-attachment-Eigenschaft mit einem fixierten Hintergrundbild und 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>
Probier es selbst »

Wann welchen Wert verwenden

  • Greifen Sie zu fixed, wenn Sie ein Hero-Bild oder einen seitenbreiten Hintergrund möchten, der stillsteht, während der Inhalt darüber scrollt — der einfachste Weg für einen Parallax-ähnlichen Effekt ohne JavaScript.
  • Greifen Sie zu local, wenn eine scrollbare Box (ein Chat-Panel, eine Code-Liste, eine Karte mit overflow: auto) ihren Hintergrund am scrollenden Inhalt statt an der Box selbst ausrichten soll.
  • Lassen Sie es bei scroll für gewöhnliche Seitenhintergründe, die sich natürlich mit der Seite bewegen sollen.

Fallstrick: fixed auf Mobilgeräten

background-attachment: fixed wird auf mobilen Browsern schlecht unterstützt — besonders im iOS Safari, wo das Bild entweder gestreckt dargestellt oder das fixierte Verhalten aus Leistungsgründen gänzlich deaktiviert wird. Wenn Sie einen zuverlässigen Parallax-Effekt auf Mobilgeräten benötigen, verwenden Sie stattdessen ein separat positioniertes Element mit fester Position, anstatt sich auf diese Eigenschaft zu verlassen. Testen Sie fixierte Hintergründe stets auf einem echten Touch-Gerät.

Da die Eigenschaft den Browser zwingen kann, den Hintergrund bei jedem Scroll-Frame neu zu zeichnen, kann der übermäßige Einsatz von fixed bei großen Bildern auch die Scroll-Performance beeinträchtigen.

Verwandte Eigenschaften

background-attachment wird üblicherweise zusammen mit anderen Hintergrund-Eigenschaften gesetzt:

Übung

Übung
Welche der folgenden Werte sind gültige Werte der CSS-Eigenschaft background-attachment?
Welche der folgenden Werte sind gültige Werte der CSS-Eigenschaft background-attachment?
Was this page helpful?