CSS -Hintergrundbild wiederholen
CSS background-repeat
Standardmäßig wiederholt die Eigenschaft background-image ein Bild sowohl horizontal als auch vertikal.
Manche Bilder sollten nur horizontal oder vertikal wiederholt werden, da sie sonst seltsam aussehen, wie zum Beispiel:
Wenn das obige Bild nur horizontal wiederholt wird (background-repeat: repeat-x;), sieht der Hintergrund besser aus:
Beispiel
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
Try it Yourself »
Tipp: Um ein Bild vertikal zu wiederholen, setzen Sie background-repeat: repeat-y;
CSS background-repeat: no-repeat
Das einmalige Anzeigen des Hintergrundbilds wird auch durch die Eigenschaft background-repeat festgelegt:
Beispiel
Das Hintergrundbild nur einmal anzeigen:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
}
Try it Yourself »
Im obigen Beispiel befindet sich das Hintergrundbild an derselben Stelle wie der Text. Wir möchten die Position des Bildes ändern, damit es den Text nicht zu sehr stört.
CSS background-position
Mit der Eigenschaft background-position wird die Position des Hintergrundbildes angegeben.
Beispiel
Positionieren Sie das Hintergrundbild in der oberen rechten Ecke:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
Try it Yourself »
Die CSS-Hintergrund-Wiederholungs- und Positionseigenschaften
| Eigentum | Beschreibung |
|---|---|
| background-position | Legt die Startposition eines Hintergrundbildes fest |
| background-repeat | Legt fest, wie ein Hintergrundbild wiederholt wird |
CSS — Hintergrundwiederholung und -position – W3Schools-Video
Dieses Video ist eine Einführung in Hintergrundwiederholung und -position in CSS.
Teil einer Reihe von Video-Tutorials zum Erlernen von CSS für Anfänger!
