Hintergrundbilder

(Auszug aus "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" von Rachel Andrew & Dan Shafer)

Mittlerweile sollte Ihnen die Zuweisung von Hintergrundfarben für Elemente mittels der Eigenschaft background-color geläufig sein. Wir werden nun lernen, wie man mit der Eigenschaft background-image sowie der Funktion url Hintergrundbilder einfügt, wie dieser Code zeigt:

body {
  background-color: white;
  color: black;
  background-image: url(fish.jpg);
}

Mit der Funktion url kann eine beliebige Bilddatei eingebunden werden, ähnlich wie im src-Attribut des <img>-Tags.

Wenn Sie eine Grafik als Hintergrund für eine Seite definieren, so, wie wir das in dem obigen Beispiel gemacht haben, wird das Bild ständig wiederholt, man sagt auch, das Bild wird gekachelt, und zwar in waagrechter und senkrechter Richtung, so oft, bis der gesamte Bildschirm ausgefüllt ist. Wenn Sie auf der Seite herunterscrollen, scrollt das Bild mit. Das ist das normale Verhalten von Hintergrundbildern, wie Sie in der folgenden Abbildung sehen können.

Hintergrundbilder werden gekachelt

Abbildung: Hintergrundbilder werden gekachelt.

Geben Sie mit einem Hintergrundbild immer auch eine Hintergrundfarbe an!
Wann immer Sie ein Hintergrundbild einfügen, das unterhalb anderer Inhalte angezeigt wird, sollten Sie auch eine passende Hintergrundfarbe definieren. Dann wird die Hintergrundfarbe schon angezeigt, während das Bild noch geladen wird, und auch bei allen Benutzern, die die Darstellung von Bildern in ihren Browsern deaktiviert haben.

Mit CSS können wir auf die Eigenschaften von Hintergrundbildern zugreifen. So lassen sich die Kacheln vermeiden oder die Bilder scroll-resistent im Hintergrund fixieren, sodass weitere Elemente der Seite darüberscrollen können.

Die folgenden beiden Abbildungen stellen die Effekte dar. Das Hintergrundbild entspricht in beiden Beispielen nicht der Fenstergröße und wird trotzdem nur einmal im Hintergrund dargestellt. Auch vom Scrollen ist das Bild entkoppelt. Die folgende Abbildung zeigt die Seite vor dem Scrollvorgang.

Hintergrundbild vor dem Scrollen

Abbildung: Hintergrundbild vor dem Scrollen.

Die nächste Abbildung zeigt dieselbe Seite nach dem Scrollvorgang. Die in der ersten Abbildung unten abgeschnittene Liste wurde nach oben bewegt. Das Hintergrundbild ist trotzdem an seinem Platz geblieben.

Hintergrundbild nach dem Scrollen

Abbildung: Hintergrundbild nach dem Scrollen.

Wie das Hintergrundbild in den beiden Abbildungen fixiert wurde, zeigt die folgende CSS-Regel:

body {
  background-color: #30293f;
  color: white;
  background-image: url(fisherman.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: right bottom;
}

Die Eigenschaft background-repeat: no-repeat sorgt dafür, dass das Hintergrundbild nicht gekachelt wird. Immer, wenn diese Deklaration zusammen mit background-image angegeben ist, wird das Hintergrundbild nur ein einziges Mal angezeigt. background-repeat kann außerdem noch die Werte repeat (der Vorgabewert), repeat-x und repeat-y annehmen. Mit repeat-x wird das Bild nur einmal horizontal gekachelt und entsprechend wird es mit repeat-y einmal vertikal gekachelt.

Mit der Eigenschaft background-attachment bestimmen wir, ob das Hintergrundbild zusammen mit den anderen Inhalten scrollen soll oder nicht. Der Vorgabewert dieser Eigenschaft ist scroll; sie kann aber auch auf den Wert fixed gesetzt werden, um das Verhalten zu bestimmen, wie wir es im obigen Beispiel gesehen haben.

Zum Schluss legen wir mit der Eigenschaft background-position: right bottom fest, dass das Hintergrundbild in der rechten unteren Ecke des Browserfensters angezeigt werden soll. Üblicherweise werden dieser Eigenschaft zwei Werte zugewiesen: Der erste Wert bestimmt die horizontale und der zweite Wert die vertikale Position des Bildes. Für die horizontale Position können die Werte left, center oder right angegeben und die vertikale Position kann mit top, center oder bottom bestimmt werden. Die Standardwerte für background-position sind left top.

Anstatt dieser Schlüsselwörter können Sie auch jeweils Prozentwerte angeben. In diesem Fall gilt der erste Wert für die horizontale Position des Hintergrundbildes. Der Wert 0% platziert das Hintergrundbild am linken Rand des Browserfensters und mit 100% wird es am rechten Rand platziert. Für die vertikale Position gilt Entsprechendes: 0% zeigt das Bild am oberen und 100% am unteren Rand des Browserfensters an. Diese Werte sind nicht auf ein 0% und 100% beschränkt, Sie können auch jeden dazwischenliegenden Wert verwenden. Zum Beispiel positioniert die folgende Deklaration das Hintergrundbild im rechten unteren Viertel des Browserfensters, aber mit Abständen zum Rand des Browserfensters:

background-position: 80% 80%;

Wie Sie sehen, haben Sie mit CSS viele Möglichkeiten, die Anzeige von Hintergrundbildern zu steuern. Alle diese Eigenschaften können auch mit einer einzigen Kurzform gesetzt werden, die unter Referenz der CSS-Eigenschaften beschrieben wird.

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright © 2006 der deutschen Übersetzung dpunkt.verlag GmbH
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

dpunkt.verlag GmbH, Ringstraße 19, 69115 Heidelberg