Hintergrundbild in CSS hinzufügen
- Hintergrundbild in CSS hinzufügen, wenn sich das Bild und die CSS-Datei im selben Ordner befinden
- Hintergrund im CSS-Bild hinzufügen, wenn sich das Bild, die HTML- und CSS-Dateien in einem anderen Ordner befinden
In diesem Tutorial wird erläutert, wie Sie Hintergrundbilder in CSS hinzufügen. Außerdem werden die häufigsten Fehler beim Hinzufügen von Hintergrundbildern erklärt.
Hintergrundbild in CSS hinzufügen, wenn sich das Bild und die CSS-Datei im selben Ordner befinden
Wir können Bilder in CSS mit der Eigenschaft background-image Hintergrundbilder erstellen. Dann können wir für den Wert die Funktion url() verwenden, wobei der Bildname oder der Bildpfad der Parameter ist. Die Eigenschaft muss nach Auswahl des Tags body im CSS geschrieben werden. Dadurch wird das Hintergrundbild im gesamten Textkörper der Webseite aktiviert. Wir sollten den Bildnamen und den Pfad entsprechend der Ordnerstruktur der HTML-, CSS- und Bilddatei schreiben. Wir werden einige Szenarien verschiedener Bildspeicherorte in Bezug auf die HTML- und CSS-Dateien erklären.
Befinden sich das Bild und die CSS-Datei im selben Verzeichnis, können wir einfach den Bildnamen in die Funktion url() schreiben. Zum Beispiel haben wir das Bild bird.jpg in einem Verzeichnis. Wir haben eine CSS-Datei style.css im selben Verzeichnis; Der folgende Code legt das Hintergrundbild fest.
Beispielcode:
body{
background-image:url(bird.jpg);
}
Außerdem müssen wir sicherstellen, dass der relative Dateipfad der HTML- und CSS-Dateien korrekt ist. Wenn CSS intern in HTML geschrieben ist, sollten sich die Bild- und HTML-Dateien im selben Verzeichnis befinden. Wenn sie sich nicht im selben Verzeichnis befinden, sollte der relative Pfad der CSS-Datei in der HTML-Datei korrekt sein.
Hintergrund im CSS-Bild hinzufügen, wenn sich das Bild, die HTML- und CSS-Dateien in einem anderen Ordner befinden
Nehmen wir an, wir haben einen HTML-Ordner namens index.html, eine CSS-Datei namens style.css und das Bild namens bird.jpg. Die HTML-Datei liegt in einem html-Ordner, die CSS-Datei liegt im css-Ordner und das Bild liegt im image-Ordner. In einer solchen Dateistruktur sollten wir uns bewusst sein, wie wir den relativen Pfad der CSS-Datei und des Bildes angeben müssen, damit das Hintergrundbild angezeigt wird. Zunächst sollten wir sicherstellen, dass die HTML- und CSS-Dateien verlinkt sind. Der folgende Code verknüpft die HTML- und CSS-Datei mit der oben angegebenen Ordnerstruktur.
Beispielcode:
<head>
<link rel="stylesheet" href="../css/styles.css">
</head>
body{
background-image : url('../image/bird.jpg');
}
Das Symbol ../ kennzeichnet einen Schritt zurück vom aktuellen Ordner. Wenn wir vom Ordner html, in dem die index.html liegt, einen Schritt zurückgehen, gelangen wir zum übergeordneten Ordner, in dem sich der Ordner css befindet. Dann finden wir die Datei style.css im Ordner css. Nun müssen wir den relativen Pfad von bird.jpg in gleicher Weise in der CSS-Datei angeben.
Da der Ordner image einen Schritt hinter der aktuellen CSS-Datei liegt, führt uns ../ zurück zum übergeordneten Ordner. Dann holt es den Ordner image, in dem die bird.jpg liegt. Somit können wir das Hintergrundbild in CSS ohne Fehler einstellen.
Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.
LinkedIn