web-dev-qa-db-fra.com

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

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

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 style.css dans css dossier qui utilise sur les deux serveurs le même chemin pour le background: url propriété? Existe-t-il une astuce que je peux utiliser avec des chemins relatifs?

cssrelative-pathabsolute-path
78
danidacar

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

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

L'URL relative renvoie deux dossiers en arrière, puis dans le dossier images - elle devrait fonctionner dans les deux cas, tant que la structure est la même.

De http://www.w3.org/TR/REC-CSS1/#url :

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

115
Kobi

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

Définissez votre URL CSS en tant que 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.

7
Garison Piatt

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 fonctionnerait pas non plus pour moi parce que les chemins relatifs étaient différents de dev à la production.

Enfin, j'étais fatigué de faire la recherche/remplacement et j'ai créé un fichier CSS dynamique (par exemple, www.monsite.com/css.php), c'est la même chose, mais je peux maintenant utiliser mes constantes php dans le fichier 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 je pourrais maintenant le compresser à l’aide du compresseur YUI sans perdre le format d’origine sur mon serveur de développement.

Bonne chance!

2
pleasedontbelong