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

Ein Problem, das auftreten kann, und scheinbar brechen diese ist bei der Verwendung von Auto-Minimierung von css. Der Anforderungspfad für das minimierte Bundle kann einen anderen Pfad haben als das ursprüngliche CSS. Dies kann automatisch geschehen, so dass es zu Verwirrung führen kann.

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

Mit anderen Worten, benennen Sie Ihre Bündel, um den gleichen Pfad (mit dem /) wie die ursprüngliche Ordnerstruktur haben, auf diese Weise werden alle externen Ressourcen wie Schriften, Bilder zu korrekten URIs durch den Browser zugeordnet. Die Alternative ist, absolute url( refs in Ihrem css zu verwenden, aber das ist in der Regel nicht wünschenswert.

Answer 2

Versuchen Sie es mit:

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

Images der Ordner, in dem sich das Bild befindet, das Sie veröffentlichen möchten.