w3docs logo

CSS-Eigenschaft background-attachment

Die Eigenschaft background-attachment legt fest, ob das background-image fixiert ist oder ob es zusammen mit dem Rest der Seite verschoben wird.

Die CSS-Eigenschaft background-attachment hat drei Werte: fixed, scroll und local. Wenn der Wert "scroll"eingestellt ist, scrollt das Hintergrundbild mit der Seite. Das ist der Standardwert.

Wenn der Wert "fixed" angewendet wird, bleibt das Hintergrundbild fest mit dem Ansichtsfenster verbunden. Selbst wenn ein Element einen Scroll-Mechanismus hat, bewegt sich der Hintergrund nicht mit der Seite.

Wenn der lokale Wert eingestellt ist, scrollt background-image mit dem Inhalt des Elements.

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

Syntax

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

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      body  {
      background-image: url("/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png");
      background-repeat: no-repeat;
      background-attachment: scroll;
      background-size: 400px 100px
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für background-attachment</h2>
    <p>Das Hintergrundbild scrollt mit der Seite. Versuchen Sie, nach unten zu scrollen.</p>
    <p>Das Hintergrundbild scrollt mit der Seite. Versuchen Sie, nach unten zu scrollen.</p>
   <p>Das Hintergrundbild scrollt mit der Seite. Versuchen Sie, nach unten zu scrollen.</p>
   <p>Das Hintergrundbild scrollt mit der Seite. Versuchen Sie, nach unten zu scrollen.</p>
  <p>Das Hintergrundbild scrollt mit der Seite. Versuchen Sie, nach unten zu scrollen.</p>
 <p>Das Hintergrundbild scrollt mit der Seite. Versuchen Sie, nach unten zu scrollen.</p>
 <p>Das Hintergrundbild scrollt mit der Seite. Versuchen Sie, nach unten zu scrollen.</p>
 <p>Das Hintergrundbild scrollt mit der Seite. Versuchen Sie, nach unten zu scrollen.</p>
   <p>Das Hintergrundbild scrollt mit der Seite. Versuchen Sie, nach unten zu scrollen.</p>
   <p>Das Hintergrundbild scrollt mit der Seite. Versuchen Sie, nach unten zu scrollen.</p>
    <p>Das Hintergrundbild scrollt mit der Seite. Versuchen Sie, nach unten zu scrollen.</p>
   <p>Das Hintergrundbild scrollt mit der Seite. Versuchen Sie, nach unten zu scrollen.</p>
<p>Das Hintergrundbild scrollt mit der Seite. Versuchen Sie, nach unten zu scrollen.</p>
   <p>Das Hintergrundbild scrollt mit der Seite. Versuchen Sie, nach unten zu scrollen.</p>
   <p>Das Hintergrundbild scrollt mit der Seite. Versuchen Sie, nach unten zu scrollen.</p>
  <p>Das Hintergrundbild scrollt mit der Seite. Versuchen Sie, nach unten zu scrollen.</p>
   <p>Das Hintergrundbild scrollt mit der Seite. Versuchen Sie, nach unten zu scrollen.</p>
    <p>Das Hintergrundbild scrollt mit der Seite. Versuchen Sie, nach unten zu scrollen.</p>
 <p>Das Hintergrundbild scrollt mit der Seite. Versuchen Sie, nach unten zu scrollen.</p>
   <p>Das Hintergrundbild scrollt mit der Seite. Versuchen Sie, nach unten zu scrollen.</p>
    <p>Das Hintergrundbild scrollt mit der Seite. Versuchen Sie, nach unten zu scrollen.</p>
 <p>Das Hintergrundbild scrollt mit der Seite. Versuchen Sie, nach unten zu scrollen.</p>
 <p>Das Hintergrundbild scrollt mit der Seite. Versuchen Sie, nach unten zu scrollen.</p>
<p>Das Hintergrundbild scrollt mit der Seite. Versuchen Sie, nach unten zu scrollen.</p>
<p>Das Hintergrundbild scrollt mit der Seite. Versuchen Sie, nach unten zu scrollen.</p>
<p>Das Hintergrundbild scrollt mit der Seite. Versuchen Sie, nach unten zu scrollen.</p>
  <p>Das Hintergrundbild scrollt mit der Seite. Versuchen Sie, nach unten zu scrollen.</p>
<p>Das Hintergrundbild scrollt mit der Seite. Versuchen Sie, nach unten zu scrollen.</p>
   <p>Das Hintergrundbild scrollt mit der Seite. Versuchen Sie, nach unten zu scrollen.</p>
    <p>Das Hintergrundbild scrollt mit der Seite. Versuchen Sie, nach unten zu scrollen.</p>
    <p>Wenn Sie keine Bildlaufleisten sehen, versuchen Sie, die Größe des Browserfensters zu ändern.</p>
  </body>
</html>

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

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      body  {
      background-image: url("/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png");
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size: 400px 100px
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für background-attachment</h2>
    <p>Das Hintergrundbild ist fixiert. Versuchen Sie, auf der Seite nach unten zu scrollen.</p>
    <p>Das Hintergrundbild ist fixiert. Versuchen Sie, auf der Seite nach unten zu scrollen.</p>
    <p>Das Hintergrundbild ist fixiert. Versuchen Sie, auf der Seite nach unten zu scrollen.</p>
    <p>Das Hintergrundbild ist fixiert. Versuchen Sie, auf der Seite nach unten zu scrollen.</p>
    <p>Das Hintergrundbild ist fixiert. Versuchen Sie, auf der Seite nach unten zu scrollen.</p>
    <p>Das Hintergrundbild ist fixiert. Versuchen Sie, auf der Seite nach unten zu scrollen.</p>
    <p>Das Hintergrundbild ist fixiert. Versuchen Sie, auf der Seite nach unten zu scrollen.</p>
    <p>Das Hintergrundbild ist fixiert. Versuchen Sie, auf der Seite nach unten zu scrollen.</p>
    <p>Das Hintergrundbild ist fixiert. Versuchen Sie, auf der Seite nach unten zu scrollen.</p>
    <p>Das Hintergrundbild ist fixiert. Versuchen Sie, auf der Seite nach unten zu scrollen.</p>
    <p>Das Hintergrundbild ist fixiert. Versuchen Sie, auf der Seite nach unten zu scrollen.</p>
    <p>Das Hintergrundbild ist fixiert. Versuchen Sie, auf der Seite nach unten zu scrollen.</p>
    <p>Das Hintergrundbild ist fixiert. Versuchen Sie, auf der Seite nach unten zu scrollen.</p>
    <p>Das Hintergrundbild ist fixiert. Versuchen Sie, auf der Seite nach unten zu scrollen.</p>
    <p>Das Hintergrundbild ist fixiert. Versuchen Sie, auf der Seite nach unten zu scrollen.</p>
    <p>Das Hintergrundbild ist fixiert. Versuchen Sie, auf der Seite nach unten zu scrollen.</p>
    <p>Das Hintergrundbild ist fixiert. Versuchen Sie, auf der Seite nach unten zu scrollen.</p>
    <p>Das Hintergrundbild ist fixiert. Versuchen Sie, auf der Seite nach unten zu scrollen.</p>
    <p>Das Hintergrundbild ist fixiert. Versuchen Sie, auf der Seite nach unten zu scrollen.</p>
    <p>Das Hintergrundbild ist fixiert. Versuchen Sie, auf der Seite nach unten zu scrollen.</p>
    <p>Das Hintergrundbild ist fixiert. Versuchen Sie, auf der Seite nach unten zu scrollen.</p>
    <p>Das Hintergrundbild ist fixiert. Versuchen Sie, auf der Seite nach unten zu scrollen.</p>
    <p>Das Hintergrundbild ist fixiert. Versuchen Sie, auf der Seite nach unten zu scrollen.</p>
    <p>Wenn Sie keine Bildlaufleisten sehen, versuchen Sie, die Größe des Browserfensters zu ändern.</p>
  </body>
</html>

In diesem Beispiel sollen Sie die Seite scrollen, um zu sehen, wie sich das feste Hintergrundbild auflöst.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</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>Ein Beispiel für background-attachment</h2>
    <p> Scrollen Sie die Seite, um den Effekt zu sehen.</p>
    <div class="example"></div>
    <div style="height:800px;background-color:#1c87c9;"></div>
  </body>
</html>

Werte

Wert Beschreibung
scroll Es lässt das Hintergrundbild zusammen mit dem Element scrollen. Das ist der Standardwert.
fixed Macht den Hintergrund in Bezug auf das Ansichtsfenster fest.
local Es führt ein Hintergrund-Scrollen zusammen mit dem Inhalt des Elements durch.
initial Es setzt die Eigenschaft auf den Standardwert.
inherit Es erbt die Eigenschaft von ihrem übergeordneten Element.

Ähnliche Ressourcen

Background-color, background-image, background-repeat, background-position, background-origin, background-clip, background-size.

Browser-Support

chrome firefox safari opera
4.0+ 25.0+ 5.0+ 11.5+

Übe dein Wissen

Welche Optionen gibt die CSS-Eigenschaft 'background-attachment' an?
Finden Sie das nützlich?