CSS/Eigenschaften/Hintergrundfarben und -bilder/background-attachment

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Sie können mithilfe der Eigenschaft background-attachment bestimmen, wie sich die Hintergrundbilder verhalten sollen, wenn das Element oder sein Inhalt bewegt wird. Beachten Sie, dass multiple Hintergrundgrafiken nicht von allen Versionen der Browser unterstützt werden.

  • CSS 2.1
  • CSS 3.0
  • IE
  • Firefox
  • Safari
  • Chrome
  • Opera

Details: caniuse.com

Beispiel ansehen …
p {
    outline: 1px solid;
    overflow: auto;
    width: 167px;
    height: 300px;
    background-image: url("http://wiki.selfhtml.org/mediawiki/images/6/61/Sonnenuntergang.jpg");
    background-repeat: no-repeat;
}
#one   { background-attachment: fixed; }
#two   { background-attachment: scroll; }
#three { background-attachment: local; }

Mit background-attachment legen Sie fest, wie sich das Hintergrundbild verhalten soll, wenn das Element bewegt wird. Erlaubt sind dabei die Angaben

  • fixed
    • das Hintergrundbild ist am Viewport ausgerichtet, Angaben zur Positionierung beziehen sich auf den Viewport (!), fehlerhaft im IE6
    • beim Bewegen des Elements wird immer ein anderer Bereich des Hintergrundes sichtbar
    • beim Bewegen des Elementinhalts bleibt der Hintergrund unverändert
    • vergleichbar mit position: fixed;
  • scroll
    • das Hintergrundbild ist an der Elementbox ausgerichtet, Angaben zur Positionierung beziehen sich auf diese
    • beim Bewegen des Elements bleibt der Hintergrund unverändert, das heißt, er scrollt mit dem Element mit
    • beim Bewegen des Elementinhalts bleibt der Hintergrund unverändert
    • vergleichbar mit position: absolute;

Die Umsetzung der CSS3-Spezifikation durch die Browser erlaubt es nun auch, das Verhalten des Hintergrundbildes beim Bewegen des Elementinhaltes zu bestimmen. Ein gültiger Wert ist:

  • local
    • das Hintergrundbild ist an der Elementbox ausgerichtet, Angaben zur Positionierung beziehen sich auf diese
    • beim Bewegen des Elements bleibt der Hintergrund unverändert
    • beim Bewegen des Elementinhalts bewegt sich der Hintergrund mit
    • vergleichbar mit position: relative;