Webmaster-Crashkurs

Hintergrundbilder mit CSS

In jedem Blockelement kann eine Hintergrundbild platziert werden. Dazu wird das Bild über den CSS-Befehl background-image:url(„hintergrundbild.jpg“); eingebunden.

Im folgenden Bespiel wird für Absätze als Hintergrundbild ein "Top Secret Stempel" verwendet. Im Beispiel für den HTML-Code wird genügend Text eingegeben, damit mehrere Zeilen verwendet werden müssen. Es wird das altbekannt „lorem ipsum“ genutzt.

Das Bild können Sie zum Spielen herunterladen (mit der rechten Maustaste auf das Bild klicken und dann auf der eigenen Festplatte speichern)
Bild zum testen: TOP Secret Bild als Hintergrundgrafik

HTML-Datei

<p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

CSS-Datei

p {
    background-image: url("bild.jpg");
}

Im Ergebnis sehen wird nun, das die Grafik sowohl horizontal wie auch vertikal immer wieder wiederholt wird. Wollen wir nun keine Wiederholung, bzw. nur eine Wiederholung in einer Richtung, muss zusätzlich der folgende CSS-Befehl noch aufgeführt werden

Keine Wiederholung

p {
    background-image: url("bild.jpg");
    background-repeat: no-repeat;
}

Wenn nur eine Wiederholung in der Horizontalen gewünscht ist:

p {
    background-image: url("bild.jpg");
    background-repeat: repeat-x;
}

Wenn nur eine Wiederholung in der Vertikalen gewünscht ist:

p {
    background-image: url("bild.jpg");
    background-repeat: repeat-y;
}

Position der Hintergrundgrafik

Position der Grafik im Hintergrund kann festgelegt werden über background-position: top; (bzw. bottom, center, left, right)

Dabei wird die Position über die Eingabe von erst der X-Richtung (left, center, right) und dann der Y-Richtung festgelegt. Möchte man, dass die Hintergrundgrafik, die sich nicht wiederholt unten rechts in der Ecke des Blockelements platziert ist, wird das durch folgende Eingabe erreicht:

p {
    background-image: url("bild.jpg");
    background-repeat: no-repeat;
    background-position: right  bottom;
}

Der erste Wert bestimmt die horizontale und der zweite Wert die vertikale Position. Es können auch Pixelangaben erfolgen. Im folgenden Beispiel wird die Grafik 100px von Links und 20px von platziert.

Das geht auch mit Prozentangaben (auch in gemischter Form): background-position: 55px 50%;

Angaben sind auch mit Minus möglich.

Aufgabe: Probieren Sie aus, was passiert, wenn Minus bei background-position genutzt wird

Probieren Sie aus, was passiert, wenn Minus bei background-position genutzt wird.

Hintergrundbilder an Position fixieren

Hintergrundbilder können über den background-attachment: fixed; fixiert werden. Die Bilder bleiben dann an Ort und Stellen, wenn gescrollt wird.

p {
    background-image: url("bild.jpg");
    background-repeat: no-repeat;
    background-position: right  top;
    background-attachment:fixed;
}
HTML5-Video-Kurs:
hier klicken für
mehr Informationen
© 2008-2018   •   www.webmaster-crashkurs.de - HTML5 Tutorial mit VideosImpressumDatenschutzerklärung