Externe Ressourcen in CSS einbinden

Problem

Sie möchten externe Ressourcen wie zusätzliche Stylesheets, Webfonts oder Bilder einbinden.

Lösung

Geben Sie den Pfad zur externen Datei mithilfe der url()-Schreibweise an, wie hier gezeigt:

background-image: url("/bilder/hintergrund.jpg");

oder auch:

@import url("http://www.css-info.eu/css/externes-stylesheet.css");

Diskussion

Um externe Ressourcen (z.B. per background-image, @import, @font-face oder auch content) in Ihr Stylesheet einzubinden, müssen Sie dem Browser mitteilen, wo die Datei zu finden ist. Das geschieht in CSS mit der url()-Schreibweise. Innerhalb der runden Klammern können Sie den Verzeichnispfad oder den URI angeben, unter dem die Ressource sich befindet. Die Schreibweise ist die gleiche, die Sie auch bei img-Tags für das src-Attribut verwenden würden. Hierbei kann der URI mit einfachen oder doppelten Anführungszeichen umgeben werden.

Offiziell ist die Verwendung von Anführungszeichen nicht notwendig. Allerdings hilft ihr Einsatz bei der Vermeidung von Problemen mit komplexen Webadressen (z.B. wenn Sonderzeichen enthalten sind). Wir verwenden die doppelte Anführungszeichen.

Beachten Sie, dass mit url() angegebene Pfade (z.B. /css/externes-stylesheet.css) relativ zum Speicherort des Stylesheets interpretiert werden. Angenommen, Sie haben folgende Verzeichnisstruktur:

/htdocs/index.html
/htdocs/css/externes-stylesheet.css
/htdocs/bilder/hintergrund.jpg

Hierbei bindet die Datei index.html das Stylesheet im Verzeichnis css ein. In externes-stylesheet.css wird wiederum ein Hintergrundbild für die Seite definiert. Damit dies auch wirklich geladen wird, müssen Sie im externen Stylesheet schreiben:

background-image: url("../bilder/hintergrund.jpg");

Diese Angabe besagt: "Gehe um eine Verzeichnisebene nach oben und steige dann in das Verzeichnis bilder ab. Suche dort nach dem Bild hintergrund.jpg." Alternativ dazu können Sie auch einen Pfad relativ zum Wurzelverzeichnis des Webservers angeben:

background-image: url("/bilder/hintergrund.jpg");

Hierbei werden die Pfade immer vom Wurzelverzeichnis des Webservers (htdocs) aus interpretiert. Oder aber Sie verwenden einen vollständigen URI:

background-image: url("http://www.css-info.eu/bilder/hintergrund.jpg");

Folgendes wird nicht funktionieren:

background-image: url("bilder/hintergrund.jpg");

Hierfür müsste sich die CSS-Datei im gleichen Verzeichnis befinden wie die Datei index.