Standardmäßig wird auf einer Webseite ein Bild in der oberen linken Ecke des Bildschirms angezeigt und wird horizontal und vertikal wiederholt. Um jedoch seine aktuelle Position zu ändern, bietet CSS eine “HintergrundpositionEigenschaft, die die Position des Hintergrundbildes wie das Zentrum angibt.

In diesem Artikel lernen wir, wie Sie die Position eines Hintergrundbildes mit Hilfe von Beispielen festlegen können. Zuerst werden wir das Verfahren des Hinzufügens eines Bildes als Hintergrund in CSS demonstrieren.

Fügen Sie Hintergrundbilder mit der Eigenschaft "Hintergrundbild" hinzu

Zum Hinzufügen von Bildern im Hintergrund die “HintergrundbildImmobilien werden genutzt.

Syntax

Im Folgenden finden Sie die Syntax, um ein Hintergrundbild auf ein HTML -Element festzulegen:

Hintergrundbild: URL ();

Hier, "URL ()”Gibt den Bildnamen- oder Bildordnerpfad an, in dem er existiert.

Wechseln Sie nun zum praktischen Beispiel für die Verwendung der Immobilie des Hintergrundbildes.

Beispiel: Einfügen eines Hintergrundbildes mit CSS

In diesem Beispiel werden wir eine erstellen

Element und Hintergrund werden hinter diesem Element hinzugefügt. Sie können Elemente entsprechend Ihrer Wahl hinzufügen und die Immobilien von Hintergrundbild darauf anwenden:

LinuxHint

Danach gehen Sie zu den CSS, verwenden Sie die “Hintergrundbild”Eigenschaft, den Bildpfad oder den Namen in der AS zuweisen“URL ()”Wert der Hintergrund-Image-Eigenschaft:

Körper
Hintergrundbild: URL ("IMG.JPG ");

Dies gibt das folgende Ergebnis:

So können Sie in CSS ein Hintergrundbild hinzufügen.

So zentrieren Sie Hintergrundbilder mithilfe der CSS-Eigenschaft „Hintergrundposition“?

Der "HintergrundpositionDie Eigenschaft legt die Position des Hintergrundbildes fest. Die Syntax ist wie folgt:

Hintergrundposition: Wert

Die Position des Bildes kann als absolut, links oder rechts angegeben werden. Insbesondere das Festlegen der “CenterDer Wert zentriert das zusätzliche Hintergrundbild.

Lassen Sie uns nun zu dem praktischen Beispiel wechseln, das zeigt.

Beispiel: So setzen Sie das Hintergrundbild in der Mitte?

Wir werden die Hintergrundfarbe und den Bildpfad mit dem “festlegenHintergrund" Eigentum. Als nächstes werden wir das nutzen “HintergrundpositionEigenschaft, um das Hintergrundbild in der Mitte festzulegen. Schließlich werden wir die "festlegen"Hintergrund WiederholungEigenschaft, die nicht wiederholt werden, um das Bild nicht zu wiederholen:

Körper
Hintergrund: RGB (128, 44, 12) URL ("Bild.JPG ") behoben;
Hintergrundposition: Zentrum;
Hintergrundrepeat: No-Repeat;

Sobald alles fertig ist, führen Sie den Code aus und schauen wir uns das Endergebnis an:

Unser Hintergrundbild ist erfolgreich in der Mitte der Seite positioniert.

Abschluss

Hintergrundbilder können mithilfe der Hintergrund-Image-Eigenschaft hinzugefügt werden, während die Hintergrundposition mithilfe der Eigenschaft von Hintergrundpositionen festgelegt werden kann. In der Mitte legt das Hintergrundbild in CSS den Wert der Hintergrund-Positionseigenschaft fest ““Center”. Der Artikel erläutert ausführlich, wie ein Bild zum Hintergrund hinzugefügt werden kann. “HintergrundbildUnd wie man seine Position mit der "festlegen" festlegenHintergrundposition" Eigentum.