Beim Einbinden von Hintergrundgrafiken sorgen die Pfadangaben zur Grafikdatei manchmal für Verwirrung. Die Grundregel lautet: »Pfadangaben in CSS-Regeln werden immer aus Sicht des CSS gesehen«.
Einfache Pfadangabe ohne Punkte: »bilder/hintergrund.png«
In Kapitel 17. 1 geht es um die Einbindung von Hintergrundgrafiken per CSS, und in Listing 17.1 steht die folgende CSS-Regel:
html {
background-color: whitesmoke;
background-image: url(bilder/hintergrund.png);
}
Code language: CSS (css)
Ob diese Pfadangabe funktioniert, hängt von den Speicherorten der CSS-Regeln und der Grafik ab. Die Pfadangabe im Beispiel geht davon aus, dass die Grafik aus Sicht der CSS-Regel in einem Unterordner namens bilder
liegt, und in den Beispieldateien funktioniert das:
- Die HTML-Dateien liegen im Ordner
uebungen
. - Die CSS-Regel zur Einbindung der Grafik steht in einem Style-Block im Head-Bereich der HTML-Dateien.
- Die Grafiken liegen im Unterordner
uebungen/bilder
.
Aus Sicht der CSS-Regel lautet die Wegbeschreibung also »Gehe in den Unterordner bilder
und hole die Datei«, und das Listing funktioniert.
Komplexe Pfadangabe mit Punkten: »../bilder/hintergrund.png«
Etwas komplizierter wird die Sache, wenn wie in der Übungswebsite sowohl das CSS als auch die Hintergrundgrafik in eigenen Unterordnern gespeichert werden:
- Die HTML-Dateien liegen im Ordner
fertig
. - Das Stylesheet
style.css
wird im Unterordner/fertig/css
gespeichert. - Die Grafikdateien liegen im Unterordner
/fertig/bilder
.
Wenn Sie im Stylesheet style.css
eine Hintergrundgrafik einbinden möchten, müssen Sie also zunächst in den übergeordneten Ordner fertig
wechseln und dann von dort in den Unterordner bilder
abzweigen.
Um in der Ordnerhierarchie zunächst eine Ebene höher zu gehen, schreibt man zwei Punkte und einen Schrägstrich an den Anfang der Wegbeschreibung:
html {
background-color: whitesmoke;
background-image: url(../bilder/hintergrund.png);
}
Code language: CSS (css)
Die Pfadangaben in Kapitel 17.1
In Kapitel 17.1 werden ohne weitere Erklärung beide Arten von Pfadangaben verwendet:
- In Listing 17.1 steht eine einfache Pfadangabe ohne Punkte:
url(bilder/hintergrund.png
. - In Listing 17.2, 17.3 und 17.4 steht dann
url(../bilder/hintergrund.png)
. - In Listing 17.5 und 17.6 wird die Hintergrunddatei dann wieder ohne
../
eingebunden.
Das ist zumindest verwirrend, und daher habe ich es jetzt in den Updates zum Buch aka Errata aufgenommen.
Vielen Dank für den Hinweis an Leser Wolfgang Faust, und ich hoffe, dass die Sache jetzt etwas deutlicher wird.
Was spricht dagegen, einfach die volle url anzugeben? Z.B. wenn man in WordPress komplizierte Pfade hat.
Macht das die Seite langsamer?
Der wichtigste Unterschied zwischen absoluten und relative Pfadangaben ist wie folgt:
Die meisten Leser werden die Übungswebsite offline auf Ihrem Computer erstellen, und da sind relative Pfade insgesamt leichter zu handhaben. Dann kann man auch mal einen Ordner verschieben oder umbenennen, ohne dass man gleich alle Pfadangaben anpassen muss.
Wenn ein Website online ist und die URL sich nicht ändert, spricht im Prinzip nichts dagegen, absolute Pfadangaben wie
https://einstieg-in-wp.de/wp-content/uploads/hintergrund.png
zu verwenden. WordPress macht das ja sowieso.Absolute Pfadangaben haben keinen echten Vorteil, verursachen aber bei einem Umzug der Website oder einer Änderung der URL zusätzliche Arbeit. Mit relativen URLs könnte man z. B. eine WordPress-Website viel einfacher umziehen oder z. B. auf SSL/HTTPS umstellen…