Hintergrundbild in CSS festlegen

1. Verwendung von background:url() zum Einstellen des Hintergrundbildes in CSS
2. Verwendung des relativen Pfades /image/picture zum Einstellen des Hintergrundbildes in CSS
3. Verwenden Sie den relativen Pfad ../image/picture, um den Hintergrund in CSS festzulegen

In diesem Artikel werden Methoden zum Festlegen von Hintergrundbildern in CSS vorgestellt. Wir besprechen, wie Sie den Pfad des Bildes festlegen, damit das Hintergrundbild korrekt angezeigt wird. Außerdem werden wir die verschiedenen relativen Pfade diskutieren.

Verwendung von background:url() zum Einstellen des Hintergrundbildes in CSS

Wir können die Eigenschaft background verwenden, um das Hintergrundbild in CSS festzulegen. Die Funktion URL() hält den Dateipfad des Bildes als Hintergrundbild. Die Eigenschaft Hintergrund ist die Kurzform mehrerer anderer Eigenschaften, die mit dem Hintergrund verbunden sind. Diese Eigenschaften sind in der Reihenfolge background-color, background-image, background-repeat, background-attachement und background-position. Mit der Eigenschaft background können wir all diesen Eigenschaften in kurzer Zeit die Werte zuweisen.

Der kritische Punkt, an dem wir Fehler machen können, ist beim Schreiben des Pfads des Bildes in die Funktion URL(). Wir sollten den Speicherort des Bildes kennen und der Pfad, der in die Funktion URL() geschrieben wird, sollte relativ zur CSS-Datei sein. Wenn wir das CSS in die HTML-Datei selbst schreiben, sollte der Pfad relativ zur HTML-Datei sein.

Im folgenden Beispiel befindet sich das Bild mit dem Namen picture im Ordner image. Der Ordner image und die folgende CSS-Datei style.css befinden sich im selben Ordner. Daher legt der folgende Code das Hintergrundbild fest.

Die Ordnerstruktur ist unten dargestellt:

web
├── style.css
├── HTML
│ └── test.html
└── image
 └── picture

Beispielcode:

body {
    background: url(image/picture);
}

Verwendung des relativen Pfades /image/picture zum Einstellen des Hintergrundbildes in CSS

Wir können das Dateipfadformat /image/picture verwenden, um das Hintergrundbild in CSS festzulegen. In einem solchen Format befindet sich das Bild im Ordner image. Der Ordner image befindet sich im Stammverzeichnis des aktuellen Webs.

Im folgenden Beispiel haben wir das Bild picture als Hintergrundbild eingestellt. Der Speicherort der CSS-Datei spielt in diesem Format keine Rolle. Wir müssen den Dateipfad nicht relativ zur CSS-Datei schreiben. Der Dateipfad wird relativ zum Stamm des aktuellen Webs geschrieben. Das bedeutet, dass der Ordner image im Root-Verzeichnis liegt.

Beispielcode:

body {
    background: url(/image/picture);
}

Verwenden Sie den relativen Pfad ../image/picture, um den Hintergrund in CSS festzulegen

Mit der Notation ../ können wir in einer Verzeichnisstruktur auf eine Ebene zurückgehen. Die Notation ../ kann verwendet werden, um den relativen Dateipfad in die Funktion URL() zu schreiben, während der Hintergrund in CSS gesetzt wird.

Zum Beispiel haben wir eine HTML-Datei test.html im Ordner html. Der Ordner html liegt innerhalb des Ordners web. Das Bild picture liegt im Ordner image im Ordner web. In einer solchen Verzeichnisstruktur können wir den folgenden Code verwenden, um den Hintergrund festzulegen.

Die Ordnerstruktur ist unten dargestellt:

web
├── CSS
├── HTML
│ └── test.html
└── image
 └── picture

Im folgenden Beispiel haben wir das CSS in die HTML-Datei selbst geschrieben. Die Notation ../ führt uns aus dem Ordner html zurück in den Ordner web. Dann findet es den Ordner image und dann die Datei picture im Ordner image. Auf diese Weise können wir das Hintergrundbild in CSS über den relativen Pfad festlegen.

Beispielcode:

body {
    background: url(../image/picture);
}