CSSファイルで相対URLを使用すると、それはどこに相対的ですか？

CSSファイルで背景画像URLのようなものを定義するとき、相対URLを使用するとき、それはどこに相対的ですか 例えば：

ファイルに次のもの/stylesheets/base-styles.cssが含まれているとします。

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

このスタイルシートを別のドキュメントに含める場合<link ... />、CSSファイルの相対URLは、スタイルシートドキュメントに相対的/stylesheets/か、それが含まれている現在のドキュメントに相対的か。次のような可能なパス：

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

W3によると：

部分的なURLは、ドキュメントではなく、スタイルシートのソースに関連して解釈されます

したがって、あなたの質問への回答では、それはに対して相対的になり/stylesheets/ます。

これについて考えると、CSSファイルを別のディレクトリのページに追加できるため、CSSファイルに標準化すると、スタイルシートがリンクされている場所であればどこでもURLが機能することになります。

CSSファイルを基準にしています。

それはスタイルシートに関連していますが、私はあなたのURLに関連するURLを作ることをお勧めします：

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

そうすれば、将来リファクタリングする必要なくファイルを移動できます。

リソースの絶対位置に依存しないモジュラースタイルシートを作成するために、作成者は相対URIを使用できます。相対URI（[RFC3986]で定義）は、ベースURIを使用して完全なURIに解決されます。RFC 3986、セクション5は、このプロセスの規範的なアルゴリズムを定義しています。CSSスタイルシートの場合、ベースURIはスタイルシートのURIであり、ソースドキュメントのURIではありません。

たとえば、次のルールがあるとします。

body { background: url("yellow") }

URIで指定されたスタイルシートにあります。

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

ソースドキュメントのBODYの背景には、URIで指定されたリソースによって記述された画像が並べて表示されます。

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

ユーザーエージェントは、無効なURIや、使用できないリソースや適用できないリソースを指定するURIの処理方法が異なる場合があります。

CSS 2.1仕様から取得。

CSSスタイルシートの場合、ベースURIはスタイルシートのURIであり、ソースドキュメントのURIではありません。

（他のものは壊れます、IMNSHO）

発生する可能性のある問題の1つは、CSSの自動最小化を使用している場合です。縮小されたバンドルのリクエストパスは、元のCSSとは異なるパスを持つことができます。これは自動的に行われる可能性があるため、混乱を招く可能性があります。

ミニファイドバンドルのマッピングされたリクエストパスは、単に「minifiedbundlename」ではなく「/ originalcssfolder / minifiedbundlename」である必要があります。

つまり、バンドルに元のフォルダー構造と同じパス（/を使用）を付けるように名前を付けます。これにより、フォント、画像などの外部リソースがブラウザーによって正しいURIにマップされます。別の方法は、CSSで絶対url（refsを使用することですが、通常は望ましくありません。

これでうまくいきました。2つのドットとスラッシュを追加します。

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

使ってみてください：

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

Images 投稿したい画像を保持するフォルダです。