Über Pfadangaben in CSS-Regeln

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 der folgenden CSS-Regel wird eine Hintergrundgrafik eingebunden:

html { 
  background-color: whitesmoke; 
  background-image: url(bilder/hintergrund.png); 
} 

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 wenn das der Fall ist, dann funktioniert das Listing. Ein Beispiel:

  • Die HTML-Dateien liegen im Ordner uebungsordner.
  • Die CSS-Regel zur Einbindung der Grafik steht in einem Style-Block im Head-Bereich der HTML-Dateien.
  • Die Grafiken liegen im Unterordner uebungsordner/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 jeweils in eigenen Unterordnern gespeichert werden:

  • Die HTML-Dateien liegen im Haputordner.
  • Das Stylesheet style.css wird im Unterordner /css gespeichert.
  • Die Grafikdateien liegen im Unterordner /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); 
} 

Merke: Pfadangaben im CSS immer aus Sicht des Stylesheets beschreiben.

Diesen Beitrag weiterempfehlen:

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

Schreibe einen Kommentar