En utilisant l'URL relative dans le fichier CSS, à quel emplacement est-elle relative?

Lorsque vous définissez quelque chose comme une URL d'image d'arrière-plan dans un fichier CSS, lorsque vous utilisez une URL relative, où est-elle relative? Par exemple:

Supposons que le fichier /stylesheets/base-styles.csscontienne:

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

Si j'inclus cette feuille de style dans différents documents via <link ... />l'URL relative dans le fichier CSS sera-t-elle relative au document de feuille de style dans /stylesheets/ou relative au document actuel auquel il est inclus? Chemins possibles comme:

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

Selon W3 :

Les URL partielles sont interprétées par rapport à la source de la feuille de style, et non par rapport au document

Par conséquent, en réponse à votre question, elle sera relative à /stylesheets/.

Si vous y réfléchissez, cela a du sens, car le fichier CSS peut être ajouté à des pages dans différents répertoires, donc la normalisation du fichier CSS signifie que les URL fonctionneront partout où les feuilles de style sont liées.

C'est relatif au fichier CSS.

C'est relatif à la feuille de style, mais je recommanderais de faire les URL par rapport à votre URL:

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

De cette façon, vous pouvez déplacer vos fichiers sans avoir besoin de les refactoriser à l'avenir.

Afin de créer des feuilles de style modulaires qui ne dépendent pas de l'emplacement absolu d'une ressource, les auteurs peuvent utiliser des URI relatifs. Les URI relatifs (tels que définis dans [RFC3986] ) sont résolus en URI complets en utilisant un URI de base. La RFC 3986, section 5, définit l'algorithme normatif pour ce processus. Pour les feuilles de style CSS, l'URI de base est celui de la feuille de style, pas celui du document source.

Par exemple, supposons la règle suivante:

body { background: url("yellow") }

se trouve dans une feuille de style désignée par l'URI:

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

L'arrière-plan du CORPS du document source sera recouvert de n'importe quelle image décrite par la ressource désignée par l'URI

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

Les agents utilisateurs peuvent varier dans la façon dont ils gèrent les URI non valides ou les URI qui désignent des ressources indisponibles ou inapplicables.

Tiré de la spécification CSS 2.1 .

Pour les feuilles de style CSS, l'URI de base est celui de la feuille de style, pas celui du document source.

(Tout le reste serait cassé, IMNSHO)

Un problème qui peut survenir, et qui semble le briser, est lors de l'utilisation de la minimisation automatique de CSS Le chemin de demande pour le bundle minifié peut avoir un chemin différent de celui du css d'origine. Cela peut se produire automatiquement et provoquer de la confusion.

Le chemin de demande mappé pour le bundle minifié doit être "/ originalcssfolder / minifiedbundlename" et pas seulement "minifiedbundlename".

En d'autres termes, nommez vos bundles pour avoir le même chemin (avec le /) que la structure de dossiers d'origine, de cette façon toutes les ressources externes comme les polices, les images seront mappées pour corriger les URI par le navigateur. L'alternative est d'utiliser une URL absolue (références dans votre CSS mais ce n'est généralement pas souhaitable.

Cela a fonctionné pour moi. en ajoutant deux points et une barre oblique.

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

Essayez d'utiliser:

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

Images étant un dossier contenant l'image que vous souhaitez publier.