Über Pfadangaben in CSS-Regeln

Peter Müller
Zuletzt aktualisiert am
2

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.

2 Gedanken zu „Über Pfadangaben in CSS-Regeln“

    • Der wichtigste Unterschied zwischen absoluten und relative Pfadangaben ist wie folgt:

      • Absolute Pfadangaben funktionieren nur in der jeweiligen Umgebung und müssen z. B. nach einem Umzug der Website angepasst werden.
      • Relative Pfadangaben müssen nur geändert werden, wenn sich die Ordnerstruktur selbst ändert.

      Die meisten Leser werden die Übungswebsite offline auf Ihrem Computer erstellen, und da sind absolute Pfadangaben tabu, da die nur auf diesem Rechner funktionieren. Eine Pfadangabe unter Windows fängt z. B. mit einem Laufwerksbuchstaben an wie c:\websites\.

      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…

      Antworten

Schreiben Sie einen Kommentar