Hintergrundbild mit background-attachment fixieren

Wenn man eine Website scrollt, dann wandern normalerweise die Hintergrundbilder mit den Element. Das kann in manchen Fällen ungewollt sein. Es ist möglich, die Hintergrundbilder zu fixieren, sodass sie beim Scrollen an ihrer initialen Position verbleiben. In dem Fall werden die Elemente über die Hintergrundbilder verschoben.

Hintergrundbild mit background-attachment fixieren

Die Fixierung des Hintergrundbilds erfolgt mit der Eigenschaft background-attachment. Zum Fixieren trägt man den Wert fixed ein. Nachfolgend ist ein Beispiel abgebildet, aus dem die Syntax ersichtlich ist.

CSS-Code mit background-attachment

Werte für background-attachment

Die folgenden Werte können für background-attachment angegeben werden.

  • scroll (Standardwert, Hintergrund wird beim Scrollen des Elements mit verschoben)
  • fixed (Hintergrund wird fixiert)
  • local (Hintergrund wird verschoben, wenn der Elementinhalt verschoben wird)
  • initial (Setzt auf den Standardwert)
  • inherit (Vererbt vom Elternelement)

Beispielcode mit dem Wert fixed

.selektor {
background-image: url(bild.jpg);
background-attachment: fixed;
}

div {
margin: 2px;
width: 250px;
height: 120px;
border: 1px solid #001055;
text-align: center;
font-size: 24px;
float: left;
}
<div class="selektor">
Ein<br>
sehr<br>
langer<br>
Text<br>
mit<br>
sehr<br>
vielen<br>
Zeilen<br>
der<br>
über<br>
das<br>
Hintergrundbild<br>
verschoben<br>
wird<br>
wenn<br>
man<br>
den<br>
Browser<br>
verkleinert<br>
und<br>
die<br>
Website<br>
scrollt.
</div>

Evtl. muss man das Browserfenster verkleinern, damit beim Viewport Scrollleisten eingeblendet werden.

Beispiel mit scroll und local

Der Unterschied zwischen scroll und local ist nicht auf Anhieb sichtbar, da sie sich identisch verhalten, wenn die Seite an sich (Viewport) gescrollt wird. In beiden Fällen werden die Hintergrundbilder verschoben. Wenn man bei den Elementen Scrollleisten einblenden lässt und diese verwendet, wandern die Hintergrundbilder beim Wert scroll nicht, da sie sich an dem Viewport orientieren. Beim Wert local werden sie jedoch mit verschoben. Nachfolgend ein Beispielcode mit einer Abbildung des Browsers.

.selektor1 {
background-image: url(bild.jpg);
background-attachment: scroll;
}

.selektor2 {
background-image: url(bild.jpg);
background-attachment: local;
}

div {
margin: 2px;
width: 250px;
height: 120px;
border: 1px solid #001055;
text-align: center;
font-size: 24px;
float: left;
overflow: scroll;
}
<div class="selektor1">
Ein<br>
sehr<br>
langer<br>
Text<br>
mit<br>
sehr<br>
vielen<br>
Zeilen.
</div>

<div class="selektor2">
Ein<br>
sehr<br>
langer<br>
Text<br>
mit<br>
sehr<br>
vielen<br>
Zeilen.
</div>
background-attachment: scroll und local

Aus der Abbildung wird deutlich, dass wenn man die Scrollleisten des Elements bedient, beim Wert scroll für background-attachment die Hintergrundbilder an ihren Positionen verbleiben, beim Wert local jedoch mit verschoben werden.