Zu welchem ​​Speicherort gehört die relative URL in der CSS-Datei?

Wenn Sie so etwas wie eine Hintergrundbild-URL in einer CSS-Datei definieren und eine relative URL verwenden, wo ist sie relativ zu? Zum Beispiel:

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

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

Wenn ich dieses Stylesheet über in verschiedene Dokumente einbinde, <link ... />ist die relative URL in der CSS-Datei relativ zum Stylesheet-Dokument in /stylesheets/oder relativ zu dem aktuellen Dokument, in dem es enthalten ist? Mögliche Wege wie:

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

Laut W3 :

Teil-URLs werden relativ zur Quelle des Stylesheets interpretiert, nicht relativ zum Dokument

Als Antwort auf Ihre Frage wird es daher relativ zu sein /stylesheets/.

Wenn Sie darüber nachdenken, ist dies sinnvoll, da die CSS-Datei zu Seiten in verschiedenen Verzeichnissen hinzugefügt werden kann. Wenn Sie sie also auf die CSS-Datei standardisieren, funktionieren die URLs überall dort, wo die Stylesheets verknüpft sind.

Es ist relativ zur CSS-Datei.

Es 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 sie in Zukunft umgestalten zu müssen.

Um modulare Stylesheets zu erstellen, die nicht vom absoluten Speicherort einer Ressource abhängig sind, können Autoren relative URIs verwenden. Relative URIs (wie in [RFC3986] definiert ) werden mithilfe eines Basis-URI 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 und nicht der des Quelldokuments.

Angenommen, die folgende Regel gilt:

body { background: url("yellow") }

befindet sich in einem von der URI festgelegten Stylesheet:

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

Der Hintergrund des KÖRPERS des Quelldokuments wird mit dem Bild gekachelt, das von der von der URI angegebenen Ressource beschrieben wird

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

Benutzeragenten können sich darin unterscheiden, wie sie mit ungültigen URIs oder URIs umgehen, die nicht verfügbare oder nicht anwendbare Ressourcen angeben.

Entnommen aus der CSS 2.1-Spezifikation .

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

(Alles andere wäre kaputt, IMNSHO)

Ein Problem, das auftreten kann und anscheinend nicht funktioniert, ist die automatische Minimierung von CSS. Der Anforderungspfad für das minimierte Bundle kann einen anderen Pfad als das ursprüngliche CSS haben. Dies kann automatisch geschehen, was zu Verwirrung führen kann.

Der zugeordnete Anforderungspfad für das minimierte Bundle sollte "/ originalcssfolder / minifiedbundlename" und nicht nur "minifiedbundlename" sein.

Mit anderen Worten, benennen Sie Ihre Bundles so, dass sie denselben Pfad (mit dem /) wie die ursprüngliche Ordnerstruktur haben. Auf diese Weise werden externe Ressourcen wie Schriftarten und Bilder vom Browser den korrekten URIs zugeordnet. Die Alternative ist die Verwendung einer absoluten URL (Refs in Ihrem CSS, aber das ist normalerweise nicht wünschenswert.

Das hat bei mir funktioniert. Hinzufügen von zwei Punkten und Schrägstrich.

body{
    background: url(../images/yourimage.png);
}

Versuchen Sie es mit:

body {
  background-attachment: fixed;
  background-image: url(./Images/bg4.jpg);
}

Images Ordner mit dem Bild, das Sie veröffentlichen möchten.