Comment utiliser les chemins relatifs / absolus dans les URL CSS?

86

J'ai un serveur de production et de développement. Le problème est la structure des répertoires.

Développement:

  • http://dev.com/subdir/images/image.jpg
  • http://dev.com/subdir/resources/css/style.css

Production:

  • http://live.com/images/image.jpg
  • http://live.com/resources/css/style.css

Comment puis-je avoir un dossier style.cssin cssqui utilise sur les deux serveurs le même chemin pour la background: urlpropriété? Y a-t-il une astuce que je peux utiliser avec des chemins relatifs?

css relative-path absolute-path nascar
la source

Réponses:

129

L'URL est relative à l'emplacement du fichier CSS , cela devrait donc fonctionner pour vous:

url('../../images/image.jpg')

L'URL relative retourne deux dossiers en arrière, puis vers le imagesdossier - cela devrait fonctionner dans les deux cas, tant que la structure est la même.

Depuis https://www.w3.org/TR/CSS1/#url :

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

Kobi
la source
cela fonctionnera-t-il si je dois revenir 2 étapes en arrière (mise à jour de la réponse) url (../../ images / image.jpg)?
nascar
@anothershrubery - désolé mon premier exemple était défectueux
nascar
@danip - cela devrait fonctionner, mais vous n'avez pas deux étapes à partir de http://domain.com/css/style.css. Je ne suis pas sûr de ce qu'on peut y faire ... EDIT: - oui, ça devrait fonctionner avec la structure mise à jour, j'ai mis à jour la réponse (juste une autre ../, semble-t-il).
Kobi
9

Personnellement, je corrigerais cela dans le fichier .htaccess. Vous devriez y avoir accès.

Définissez votre URL CSS comme telle:

url(/image_dir/image.png);

Dans votre fichier .htacess, mettez:

Options +FollowSymLinks
RewriteEngine On
RewriteRule ^image_dir/(.*) subdir/images/$1

ou

RewriteRule ^image_dir/(.*) images/$1

selon le site.

Garison Piatt
la source
2

J'ai eu le même problème ... à chaque fois que je voulais publier mon css ... je devais faire une recherche / remplacement ... et le chemin relatif ne fonctionnait pas non plus pour moi car les chemins relatifs étaient différents du développement à la production.

Finalement j'étais fatigué de faire la recherche / remplacement et j'ai créé un css dynamique, (par exemple www.monsite.com/css.php) c'est pareil mais maintenant je pourrais utiliser mes constantes php dans le css. quelque chose comme

.icon{
  background-image:url('<?php echo BASE_IMAGE;?>icon.png');
}

et ce n'est pas une mauvaise idée de le rendre dynamique car maintenant je pourrais le compresser en utilisant le compresseur YUI sans perdre le format d'origine sur mon serveur de développement.

Bonne chance!

heureux
la source
13
Il n'y a pas de phptag sur la question! OP n'utilise peut-être pas du tout php.
Bazzz
6
est juste un exemple .. vous pouvez utiliser php, asp, jsp .. l'idée est la même
happyontbelong
6
cela pourrait aussi être statique.
jcuenod
3
De plus, si cela se trouve dans un fichier CSS, il <?php **** ?>ne sera pas traité
JD Vangsness