Bildeffekte mit “background-attachment: fixed”

Exzellenter Artikel
von Philipe Fatio | 4 | 10 Kommentare | 53177 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

Kommentare: Bildeffekte mit “background-attachment: fixed”

Neuen Kommentar schreiben
Danke
Beantworten

Interessanter Artikel! Danke

Benutzer gelöscht am 02.09.2008 um 21:17
head styling
Beantworten

cool, wär ich nie drauf gekommen!

annieone am 27.04.2008 um 09:16
IE funktionabel?
Beantworten

Hi, schönes Tut, aba hab beim Überfliegen jetzt nicht auf Browser_Kompatibiltät geachtet. IE6.0 kann das auf keinen Fall beim 7.0 weiss ich das nich mehr genau.

Oder geht das neuerdings?

Benutzer gelöscht am 18.04.2008 um 17:49
Re: IE funktionabel?
Beantworten

Hi, schönes Tut, aba hab beim Überfliegen jetzt nicht auf Browser_Kompatibiltät geachtet. IE6.0 kann das auf keinen Fall beim 7.0 weiss ich das nich mehr genau.

Oder geht das neuerdings?

IE6 unterstützt background-attachment: fixed nur im body. IE7 kann das.

Philipe Fatio am 18.04.2008 um 19:27
Re: IE funktionabel?
Beantworten

Hey, klasse, werd ich mir merken, danke

Hi, schönes Tut, aba hab beim Überfliegen jetzt nicht auf Browser_Kompatibiltät geachtet. IE6.0 kann das auf keinen Fall beim 7.0 weiss ich das nich mehr genau.

Oder geht das neuerdings?

IE6 unterstützt background-attachment: fixed nur im body. IE7 kann das.

Benutzer gelöscht am 18.04.2008 um 19:47
html-element?
Beantworten

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 <html>-Element ist doch das <body>-Element gemeint oder? Es wäre mir neu, wenn das <html>-Element eine margin-Angabe hätte...

Markus Unterkofler am 18.04.2008 um 13:43
Re: html-element?
Beantworten

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 <html>-Element ist doch das <body>-Element gemeint oder? Es wäre mir neu, wenn das <html>-Element eine margin-Angabe hätte...

Nein, eben nicht. Man kann das <html>-Element genau so stylen wie alle anderen Elemente. Ist ja auch nur ein Element, oder? Man könnte auch den <head> stylen:

 
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<html>
    <head>
        <title>Beispiel</title>
        <style type="text/css">
            head { display: block; }
            head * { display: none; }
            head title { display: block; font-size: 200%; color: red; }
        </style>
    </head>
    <body>
        <h1>Test</h1>
    </body>
</html>
Philipe Fatio am 18.04.2008 um 14:04
Re: html-element?
Beantworten

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 <html>-Element ist doch das <body>-Element gemeint oder? Es wäre mir neu, wenn das <html>-Element eine margin-Angabe hätte...

Nein, eben nicht. Man kann das <html>-Element genau so stylen wie alle anderen Elemente. Ist ja auch nur ein Element, oder? Man könnte auch den <head> stylen:

klar KÖNNTE man das, aber wer macht das? Das eigentliche was man sieht ist doch der body-Bereich. Wenn ich dem head ein CSS zuweise, wo sieht man das dann? Schriftgrößen- und Farbangaben werden doch beim title z.B. von den Browsern ignoriert. Also ich habe zumindest noch keinen gesehen der das interpretiert.

Markus Unterkofler am 18.04.2008 um 14:22
Re: html-element?
Beantworten

Wenn ich dem head ein CSS zuweise, wo sieht man das dann?

Du hast es wohl nicht ausprobiert. Man sieht es logischerweise auf der Seite. Das was auf der Titelleiste ist, gehört ja nicht zum Anzeigebereich der Seite, demnach nicht stylebar. Du verstehst meinen Punkt irgendwie nicht.

Philipe Fatio am 18.04.2008 um 14:43
sehr schöner Artikel
Beantworten

danke dafür!

Moritz Kern am 18.04.2008 um 10:51