CSS -Hintergrundbildwiederholung
CSS-Hintergrundwiederholung
Standardmäßig background-imagewiederholt die Eigenschaft ein Bild sowohl horizontal als auch vertikal.
Einige Bilder sollten nur horizontal oder vertikal wiederholt werden, sonst sehen sie seltsam aus, wie hier:
Beispiel
body
{
background-image: url("gradient_bg.png");
}
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;
}
Tipp: Um ein Bild vertikal zu wiederholen, stellen Sie einbackground-repeat: repeat-y;
CSS-Hintergrundwiederholung: keine Wiederholung
Das einmalige Anzeigen des Hintergrundbilds wird auch durch die background-repeatEigenschaft festgelegt:
Beispiel
Hintergrundbild nur einmal anzeigen:
body
{
background-image: url("img_tree.png");
background-repeat: no-repeat;
}
Im obigen Beispiel wird das Hintergrundbild an der gleichen Stelle wie der Text platziert. Wir wollen die Position des Bildes ändern, damit es den Text nicht zu sehr stört.
CSS-Hintergrundposition
Die background-positionEigenschaft wird verwendet, um die Position des Hintergrundbilds anzugeben.
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;
}