En utilisant l’URL relative dans le fichier CSS, à quel emplacement est-il relatif?

Lorsque vous définissez quelque chose comme une URL d’image d’arrière-plan dans un fichier CSS, en cas d’utilisation d’une URL relative, où est-il relatif? Par exemple:

Supposons que le fichier /stylesheets/base-styles.css contient:

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

Si j’inclus cette feuille de style dans différents documents via , l’URL relative dans le fichier CSS sera-t-elle relative au document de feuille de style dans /stylesheets/ ou au document actuel auquel elle est incluse? 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, ce sera par rapport à /stylesheets/ .

Si vous pensez à cela, cela a du sens, car le fichier CSS pourrait être ajouté à des pages dans des répertoires différents, donc sa standardisation dans le 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 vous recommande 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 à les restructurer à l’avenir.

Pour 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 à l’aide d’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 celle de la feuille de style, pas celle 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 BODY du document source sera classé avec l’image décrite par la ressource désignée par l’URI.
 http://www.example.org/style/yellow 
Les agents utilisateurs peuvent avoir une manière différente de gérer les URI ou les URI non valides 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 celle de la feuille de style, pas celle du document source.

(Tout le rest serait cassé, IMNSHO)

Un problème qui peut survenir, et apparemment casser cela est lorsque vous utilisez la minimisation automatique de css. Le chemin de requête pour le bundle minifié peut avoir un chemin différent de celui d’origine. Cela peut se produire automatiquement afin de créer une confusion.

Le chemin de requête mappé pour le bundle minifié doit être “/ originalcssfolder / minifiedbundlename” et pas seulement “minifiedbundlename”.

En d’autres termes, atsortingbuez à vos ensembles le même chemin (avec /) que la structure de dossiers d’origine. Ainsi, toutes les ressources externes telles que les fonts et les images seront mappées pour corriger les URI par le navigateur. L’alternative consiste à utiliser une URL absolue (réfs dans votre css mais ce n’est généralement pas souhaitable).

Cela a fonctionné pour moi. append 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 cours de dossier contenant la photo que vous souhaitez publier.