Bildeffekte mit “background-attachment: fixed”

Exzellenter Artikel
von Philipe Fatio | 4 | 55609 Aufrufe

Anzeige Hier werben

Einleitung

Die CSS-Eigenschaft background-attachment ist nicht weit verbreitet. Daher kommt diese praktisch nie zum Einsatz. Mit etwas Kreativität lassen sich mit dieser Eigenschaft jedoch hübsche Effekte anstellen. Sie kann Ihnen sogar die Arbeit erleichtern, falls Sie mit grafischen Menüs arbeiten. Mit Hilfe von background-attachment können beispielsweise die folgenden Effekte erzielt werden, welche Sie auf dieser Beispielseite auch selbst testen können.

Bild zu Bildeffekte mit “background-attachment: fixed”
Bildeffekte mit CSS

Syntax

Die Eigenschaft background-attachment kennt drei verschiedene Werte, wobei scroll der Standardwert ist:

Wert Beschreibung
scroll Die Hintergrundgrafik scrollt mit dem Element mit.
fixed Die Hintergrundgrafik ist fix auf dem Viewport – dem Anzeigebereich der Seite. Beim scrollen bleibt die Grafik an Ort und Stelle, ist jedoch nur sichtbar innerhalb des betreffenden Elementes.
inherit Der Wert wird von der Eigenschaft des Elternelementes geerbt.

Man kann den Wert über die direkte Eigenschaft setzen:

 
css
1
background-attachment: fixed;

Über die background-Kurzform kann die Eigenschaft ebenfalls gesetzt werden. Die Syntax dazu lautet:

 
css
1
background: color image repeat attachment position;

Mehr zu Kurzschreibweisen finden Sie im Artikel Effizientes CSS.

Somit könnte die Angabe wie folgt aussehen:

 
css
1
background: #ccc url(bild.png) no-repeat fixed 15px 50%;

Funktionsweise

Die Angaben über die Position (background-position) des Hintergrundbildes ist bekanntlich relativ zur oberen linken Ecke des Elementes. Sobald background-attachment auf fixed gestellt wird, ändert sich die Positionierung des Hintergrundbildes grundlegend:

Wenn background-attachment auf fixed gesetzt ist, beziehen sich Positionsangaben auf die obere linke Ecke des Anzeigebereiches der Seite und nicht etwa auf die gewohnte obere linke Ecke des betreffenden Elementes.

Mit obere linke Ecke ist explizit die Ecke des Anzeigebereichs gemeint und nicht etwa die Ecke des <html>-Elementes. Wenn das <html>-Element also ein margin hat und sich die ganze Seite demnach verschiebt, ändert sich die Position eines fixed Hintergrundbildes nicht.

Mit Anzeigebereich ist das Rechteck gemeint, wo sich die Seite befindet. Enthält eine Seite Frames, dann hat jedes Frame logischerweise seinen eigenen Anzeigebereich.

Wurde ein Hintergrundbild eines Elementes auf fixed gestellt und wird dieses durch no-repeat nicht wiederholt, so wird dieses Bild erst sichtbar, wenn das Element in den Bereich kommt, wo das Bild positioniert ist. Das heisst, dass das Hintergrundbild möglicherweise nie zum Vorschein kommt. Folgend einige Beispiele um Ihnen dies zu veranschaulichen.

Veranschaulichung

Bild zu Bildeffekte mit “background-attachment: fixed”
Das dazu verwendete Bild
  1. Zunächst erstellen wir das HTML-Dokument mit einem <div>-Element, welches unser Hintergrundbild beinhalten wird.
  2. Wir definieren nun, dass das Bild fixed ist und sich nicht wiederholt. Dieses positionieren wir oben links.
  3. Das Element selber verschieben wir durch margin unterhalb des Hintergrundbildes. Somit wird das Bild nicht sichtbar sein.
  4. Zuletzt setzten wir dem <body>-Element ein grosses height damit das scrollen auf der Seite ermöglicht wird.

Wie folgt könnte das aussehen. Probieren Sie dieses Beispiel aus und scrollen Sie nach unten um zu verstehen, wie der Hintergrund angezeigt wird.

 
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<html>
    <head>
        <title>Beispiel</title>
        <style type="text/css">
            body {
                height: 1500px;
            }
            div {
                height: 150px;
                margin-top: 200px;
                background: #ccc url(/coding/article/css-bildeffekte-mit-background-attachment-fixed.html/image/normal.png) no-repeat fixed 50px 20px;
            }
        </style>
    </head>
    <body>
        <div>Nach unten scrollen um das Bild zu sehen.</div>
    </body>
</html>
Bild zu Bildeffekte mit “background-attachment: fixed”
Schwarz Weiss als Effekt

background-attachment

Führen wir dieses Beispiel weiter. Falls wir nun das gleiche Bild auch im <body>-Element aufführen, so wird das Bild ständig sichtbar sein. Wenn jedoch das graue <div>-Element nun über dem Bild ist, ist das Bild nun nicht das des <body>’s sondern dasjenige des <div>’s.

Was wäre nun, wenn wir das Bild im <div> durch eines ersetzen, das nur leicht verändert ist? Zum Beispiel wenn es nur noch aus Grautönen besteht. Ersetzen wir also im <div> das Bild durch das Schwarz-Weiss-Bild rechts.

Versuchen Sie nun nochmals zu scrollen und observieren Sie was passiert, sobald die graue Box über dem Bild ist.

 
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<html>
    <head>
        <title>Beispiel</title>
        <style type="text/css">
            body {
                height: 1500px;
                background: url(/coding/article/css-bildeffekte-mit-background-attachment-fixed.html/image/normal.png) no-repeat fixed 50px 20px;
            }
            div {
                height: 150px;
                margin-top: 200px;
                background: #ccc url(/coding/article/css-bildeffekte-mit-background-attachment-fixed.html/image/bw-gray.png) no-repeat fixed 50px 20px;
            }
        </style>
    </head>
    <body>
        <div>Nach unten scrollen um das Bild zu sehen.</div>
    </body>
</html>

Sie können viele weitere Effekte einbauen. Seien Sie kreativ. Sie können auch Prozentwerte oder andere Relativwerte wie em für die Positionierung verwenden.

Besuchen Sie die externe Beispielseite um einige weitere Effekte zu sehen. Die Idee dahinter ist die gleiche, wie hier besprochen.

Anwendungsbereiche

Wie man sehen konnte, lassen sich mit dieser CSS-Eigenschaft nette Effekte erstellen mit einem gewissen “wow”-Faktor. Man kann jedoch viel mehr damit anstellen. Hier einige Ideen, wo diese Eigenschaft praktisch wäre:

  • Sie haben ein Menü, welches das Hintergrundbild leicht durchscheinen lässt. Definieren Sie für das Menü als Hintergrundbild ein leicht verändertes (z.B. erhelltes) Bild. Nun müssen Sie sich nicht um die Positionierung des Hintergrundbildes kümmern und können sogar Relativgrössen dafür verwenden. Falls Sie was ändern müssen, nur die HTML-Datei bearbeiten und nicht etwa in einem Grafikprogramm alles neu zeichnen. Dazu ein Beispiel.
  • Wenn Sie ein Musterhintergrund verwenden, können Sie dieses auf fixed stellen, damit ein oft auftretendes flackern des Bildes beim scrollen, was sehr irritierend für das Auge sein kann, verhindert wird.
  • Vielleicht haben Sie ein Hintergrund, der eine Landschaft zeigt o.ä. Positionieren Sie dieses ganz unten und stellen Sie es auf fixed. Damit bleibt die Landschaft “am Boden” und sieht logischer und verständlicher aus.

Fazit

Dem Anwendungsbereich sind keine Grenzen gesetzt. Man könnte viele komplexe Dinge damit anstellen, z.B eine Fortschrittsanzeige, die je weiter unten auf der Seite voller wird, was bei einem sehr langen Formular auch benutzerfreundlich sein kann.

Firefox2Unterstützt3Unterstützt
IE6Nein7Unterstützt
Opera9Unterstützt
Safari3Unterstützt
background-attachment: fixed

background-attachment ist also nicht irgendeine unnütze Eigenschaft. Auch wenn diese nicht weit verbreitet ist, muss man davor nicht zurückschrecken, im Gegenteil. Mit ihrer Verwendung wird man den einen oder anderen überraschen und seine eigene Seite möglicherweise von anderen abheben.

Über den Autor: Philipe Fatio
hat keine Beschreibung angegeben. Eine Beschreibung kann man unter dem Punkt "Profil bearbeiten" im Kontrollzentrum eintragen.
Profilseite betrachten