Ü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 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.