CSS Kochbuch

3.6 Hintergrundbilder positionieren

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 Abbildung 3-7):

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

Abbildung 3-7. Das Hintergrundbild wird exakt 75 Pixel rechts und 150 Pixel unterhalb ...