CSS background-attachment-Eigenschaft

Die Eigenschaft background-attachment definiert, ob das background-image fixiert ist oder mit dem Rest der Seite scrollt.

background-attachment unterstützt fünf Werte: scroll, fixed, local, initial und inherit. Bei Einstellung von scroll scrollt das background-image mit der Seite. Dies ist der Standardwert. Bei Anwendung von fixed bleibt das background-image am Viewport fixiert. Selbst wenn ein Element einen Scrollmechanismus besitzt, bewegt sich der Hintergrund nicht mit der Seite. Bei Einstellung von local scrollt das background-image mit dem Inhalt des Elements. initial setzt die Eigenschaft auf ihren Standardwert zurück, und inherit erbt sie vom Elternelement. Hinweis: In JavaScript lautet der DOM-Eigenschaftsname camelCase: backgroundAttachment.

Anfangswert	scroll
Gilt für	Alle Elemente. Gilt auch für ::first-letter und ::first-line.
Vererbt	Nein.
Animierbar	Nein.
Version	CSS1
DOM-Syntax	object.style.backgroundAttachment = "scroll";

Syntax

Syntax der CSS background-attachment-Eigenschaft

css

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

Beispiel für die background-attachment-Eigenschaft mit dem Wert „scroll“:

html

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      body {
        background-image: url("https://de.w3docs.com/build/images/w3docs-logo-black.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>

Try it Yourself »

Im folgenden Beispiel ist das background-image „fixed“ und bewegt sich nicht mit der Seite.

Beispiel für die background-attachment-Eigenschaft mit dem Wert „fixed“:

html

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      body {
        background-image: url("https://de.w3docs.com/build/images/w3docs-logo-black.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>

Try it Yourself »

Beispiel für die background-attachment-Eigenschaft mit dem Wert „local“:

html

<!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://de.w3docs.com/build/images/w3docs-logo-black.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>

Try it Yourself »

Beispiel für die background-attachment-Eigenschaft mit einem fixierten Hintergrundbild und background-size: cover:

html

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .example {
        background-image: url("https://de.w3docs.com/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>

Try it Yourself »

CSS background-attachment-Eigenschaft ​

Syntax ​

Beispiel für die background-attachment-Eigenschaft mit dem Wert „scroll“: ​

Beispiel für die background-attachment-Eigenschaft mit dem Wert „fixed“: ​

Beispiel für die background-attachment-Eigenschaft mit dem Wert „local“: ​

Beispiel für die background-attachment-Eigenschaft mit einem fixierten Hintergrundbild und background-size: cover: ​

Praxis ​

CSS background-attachment-Eigenschaft

Syntax

Beispiel für die background-attachment-Eigenschaft mit dem Wert „scroll“:

Beispiel für die background-attachment-Eigenschaft mit dem Wert „fixed“:

Beispiel für die background-attachment-Eigenschaft mit dem Wert „local“:

Beispiel für die background-attachment-Eigenschaft mit einem fixierten Hintergrundbild und background-size: cover:

Praxis