Mit relativen URL in CSS-Datei, welche Position ist es relativ zu?

Question

Wenn ich in einer CSS-Datei eine URL für ein Hintergrundbild definiere und eine relative URL verwende, wohin bezieht sie sich dann? Zum Beispiel:

Angenommen, die Datei /stylesheets/base-styles.css enthält:

div#header { 
    background-image: url('images/header-background.jpg');
}

Wenn ich dieses Style-Sheet in verschiedene Dokumente über <link ... /> wird die relative URL in der CSS-Datei sein relativ zum Stylesheet-Dokument en /stylesheets/ o relativ zum aktuellen Dokument ist es inbegriffen? Mögliche Pfade wie:

/item/details.html
/about/index.html
/about/extra/other.html
/index.html

Answer 1

Selon W3 :

Partielle URLs werden relativ zur Quelle der Stilvorlage interpretiert, nicht relativ zum Dokument.

Die Antwort auf Ihre Frage lautet daher, dass sie relativ zu /stylesheets/ .

Wenn man darüber nachdenkt, ist dies sinnvoll, da die CSS-Datei zu Seiten in verschiedenen Verzeichnissen hinzugefügt werden könnte. Die Standardisierung auf die CSS-Datei bedeutet, dass die URLs überall funktionieren, wo die Stylesheets verlinkt sind.

Answer 2

Sie ist relativ zur CSS-Datei.

Answer 3

Sie ist relativ zum Stylesheet, aber ich würde empfehlen, die URLs relativ zu Ihrer URL zu machen:

div#header { 
  background-image: url(/images/header-background.jpg);
}

Auf diese Weise können Sie Ihre Dateien verschieben, ohne dass Sie sie in Zukunft umstrukturieren müssen.

Answer 4

Um modulare Stylesheets zu erstellen, die nicht von der absoluten Position einer Ressource abhängig sind, können Autoren relative URIs verwenden. Relative URIs (wie definiert in [RFC3986] ) werden unter Verwendung eines Basis-URIs in vollständige URIs aufgelöst. RFC 3986, Abschnitt 5, definiert den normativen Algorithmus für diesen Prozess. Bei CSS-Stylesheets ist der Basis-URI der des Stylesheets, nicht der des Quelldokuments.

Nehmen wir zum Beispiel die folgende Regel an:

body { background: url("yellow") }

befindet sich in einer durch den URI bezeichneten Formatvorlage:

http://www.example.org/style/basic.css

Der Hintergrund des BODY des Quelldokuments wird mit dem Bild gekachelt, das von der durch den URI bezeichneten Ressource beschrieben wird

http://www.example.org/style/yellow

Benutzer-Agenten können sich darin unterscheiden, wie sie ungültige URIs oder URIs, die nicht verfügbare oder nicht zutreffende Ressourcen bezeichnen, behandeln.

Entnommen aus dem CSS 2.1 Spezifikation .

Answer 5

Bei CSS-Stylesheets ist der Basis-URI der des Stylesheets, nicht der des Quelldokuments.

(Alles andere wäre kaputt, IMNSHO)