Zentrieren Hintergrundbilder in CSS

1. Verwenden Sie die Hintergrundeigenschaften, um das Hintergrundbild in CSS zu zentrieren
2. Verwenden Sie die Eigenschaften width, height, left und top, um das Hintergrundbild in CSS zu zentrieren

Dieses Tutorial zeigt einige Methoden zum Zentrieren von Hintergrundbildern in CSS.

Verwenden Sie die Hintergrundeigenschaften, um das Hintergrundbild in CSS zu zentrieren

Wir können das Hintergrundbild in CSS mithilfe der verschiedenen Hintergrundeigenschaften zentrieren.

Wir werden die Eigenschaften wie background-image, background-repeat, background-attachment, background-position und background-size verwenden, um das Hintergrundbild zu zentrieren. Wir können auch die abgekürzte Eigenschaft Hintergrund verwenden, um diese verschiedenen Eigenschaften zu definieren.

Die Eigenschaft background-image setzt das Bild mit der Funktion url(). Wir verwenden die Eigenschaft background-repeat, um das Wiederholungsverhalten des Bildes zu definieren.

Die Eigenschaft background-attachment definiert das feste oder scrollende Verhalten des Hintergrunds. Die Startposition des Hintergrunds können wir mit der Eigenschaft background-position festlegen.

Schließlich können wir die Größe des Bildes mit der Eigenschaft background-size festlegen.

Wählen Sie beispielsweise das Tag html in CSS aus und wenden Sie die Stile an.

Legen Sie zunächst ein Hintergrundbild mit der Eigenschaft background-image fest. Als nächstes setzen Sie die Eigenschaft background-repeat auf no-repeat.

Schreiben Sie dann die Option fixed für die Eigenschaft background-attachment. Wenden Sie danach die Eigenschaft background-position auf die Option center center und die Eigenschaft background-size auf cover an.

Im folgenden Beispiel verhindert die Option no-repeat, dass das Bild wiederholt wird. Wenn das Hintergrundbild klein ist, wird das Bild in Zeilen und Spalten repliziert.

Das Hintergrundbild bleibt fixiert, wenn wir die Seite scrollen, da wir die Option fixed für die Eigenschaft background-attachment verwendet haben. Die Option center center in der Eigenschaft background-position platziert das Bild horizontal und vertikal in der Mitte.

Schließlich ändert die Option cover die Größe des Bildes, um den gesamten html-Container abzudecken. Daher können wir das Hintergrundbild mithilfe verschiedener Hintergrundeigenschaften in CSS zentrieren.

Beispielcode:

html{
    background-image: url("/img/DelftStack/logo.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
    background-size: cover;
}

Verwenden Sie die Eigenschaften width, height, left und top, um das Hintergrundbild in CSS zu zentrieren

In dieser Methode besprechen wir eine andere Möglichkeit, das Hintergrundbild in CSS zu zentrieren, indem wir die Eigenschaften wie width, height, left und top verwenden. Wir können die Höhe und Breite auf 100% setzen, damit das Bild die volle Höhe und Breite des Tags body einnimmt.

Das body-Element ist das übergeordnete Element des img-Elements. Mit den Eigenschaften top und left können wir den Abstand des Hintergrundbildes zu den oberen und linken Elementen des Bildes einstellen.

Es ist zu beachten, dass diese beiden Eigenschaften nur funktionieren, wenn die Eigenschaft position des Elements gesetzt ist.

Wählen Sie beispielsweise das Tag img und setzen Sie die Eigenschaften width und height auf 100%. Als nächstes setzen Sie die Eigenschaft position auf fixed. Setzen Sie dann die Eigenschaften left und right auf 0.

Wir haben den Wert 0 in den Eigenschaften left und right verwendet, um keinen Abstand zum oberen und linken Rand des Bildes mit dem benachbarten Element zu lassen. Als Ergebnis passt das Bild in das Ansichtsfenster des Browsers.

Auf diese Weise können wir diese verschiedenen Eigenschaften verwenden, um das Hintergrundbild in CSS zu zentrieren.

Beispielcode:

img {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
}

<div>
    <img src="/img/DelftStack/logo.png">
</div>