Hintergrundbilder positionieren

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Problem

Sie möchten ein Hintergrundbild an einer bestimmten Stelle auf der Webseite positionieren.

Lösung

Verwenden Sie die Eigenschaft background-position, um die Position für das Hintergrundbild zu definieren. Um einen Hintergrund – von der linken oberen Ecke des Ansichtsbereichs aus gesehen – um 75 Pixel nach rechts und 150 Pixel nach unten verschoben darzustellen, können Sie die folgende CSS-Regel benutzen (siehe folgende Abbildung):

body {
 background-image: url(bkgd.jpg);
 background-repeat: no-repeat;
 background-position: 75px 150px;
}

Hintergrundbild wird 75px rechts und 150px unterhalb linker oberen Ecke des Ansichtsbereichs platziert

Abbildung: Das Hintergrundbild wird exakt 75 Pixel rechts und 150 Pixel unterhalb der linken oberen Ecke des Ansichtsbereichs platziert.

Diskussion

Die Eigenschaft background-position erhält zwei durch ein Leerzeichen getrennte Werte. Der erste Wert des Paares gibt an, wie weit das Bild entlang der x-Achse verschoben werden soll, während der zweite Wert die Verschiebung entlang der y-Achse definiert. Wird nur ein Wert angegeben, wird dieser für die horizontale Verschiebung verwendet; der Wert für die vertikale Verschiebung wird standardmäßig auf 50% gesetzt.

In der Lösung wurden als Maßeinheit Pixel verwendet, um die Platzierung des Hintergrundbildes festzulegen, Sie können aber auch Prozentwerte benutzen. Erhält background-position den Wert 50%, so platziert der Browser das Bild genau im Zentrum des Ansichtsbereichs, wie in der folgenden Abbildung zu sehen ist. Verwenden Sie die Werte 0% bzw. 100%, wird das Bild dagegen in der linken oberen bzw. unteren Ecke platziert.

Hintergrundbild wird im Browserfenster zentriert

Abbildung: Das Hintergrundbild wird im Browserfenster zentriert.

Neben Pixeln und Prozentwerten können Sie auch die Schlüsselwörter left, center und right für die Position auf der x-Achse sowie top, center und bottom für die y-Achse einsetzen. Durch die Kombination dieser Schlüsselwörter können Sie ein Hintergrundbild also an acht genau definierten Positionen im Ansichtsbereich platzieren (in den Ecken und in der Mitte dazwischen). Um beispielsweise den Wert 50% aus der vorherigen Abbildung nachzustellen, können Sie auch schreiben:

body {
 background-image: url(bkgd.jpg);
 background-repeat: no-repeat;
 background-position: center;
}

Um das Hintergrundbild dagegen in der rechten unteren Ecke zu positionieren (siehe folgende Abbildung), verwenden Sie stattdessen diese CSS-Regel:

body {
 background-image: url(bkgd.jpg);
 background-repeat: no-repeat;
 background-position: bottom right;
}

Hintergrundbild wird in rechten unteren Ecke platziert

Abbildung: Das Hintergrundbild wird in der rechten unteren Ecke platziert.

Wenn Sie die Eigenschaften background-position und background-repeat kombinieren, können Sie Hintergrundbilder auch von einer anderen Ausgangsposition als den Seiten des Ansichtsbereichs wiederholen lassen. Der folgende Codeschnipsel erzeugt ein Webseitendesign wie das in der nächsten Abbildung:

Durch CSS-Eigenschaften background-repeat und background-position entsteht eine sich wiederholende Fotomontage

Abbildung: Durch die Verwendung der CSS-Eigenschaften background-repeat und backgroundposition können wir eine sich wiederholende Fotomontage erstellen.

body {
 background-image: url(montage.jpg);
 background-repeat: repeat-x;
 background-position: 55px 100px;
}
h1 {
 font-size: 75px;
 font-family: Verdana, Helvetica, Arial, sans-serif;
 text-align: center;
 margin: 0;
 padding: 0 0 125px 0;
}
p {
 line-height: 1.5em;
 font-family: Verdana, Helvetica, Arial, sans-serif;
 margin: 0 15%;
}

Siehe auch

  

<< zurück vor >>

 

 

 

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

Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" 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.

O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln