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