92 votes

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

139voto

Kobi Points 65357

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

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

L'url relative va deux dossiers, puis à l' images le dossier, il doit travailler pour les deux cas, tant que la structure est la même.

À partir de http://www.w3.org/TR/REC-CSS1/#url:

Partielle Url sont interprétés par rapport à la source de la feuille de style, pas par rapport au document

2voto

pleasedontbelong Points 7264

j'ai eu le même problème... à chaque fois que je voulais publier mon css ... j'ai dû faire un rechercher/remplacer.. et chemin relatif ne serait pas travailler pour moi, car les chemins relatifs sont différents de dev à la production.

Enfin a marre de faire le chercher/remplacer, et j'ai créé un css dynamique, (par ex. www.mysite.com/css.php il en est de même, mais maintenant, je pouvais utiliser mon php constantes dans le css. somethig comme

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

et ce n'est pas une mauvaise idée pour la rendre dynamique, parce que maintenant, je pouvais le compresser à l'aide de YUI compressor, sans perdre le format d'origine sur mon serveur de dev.

Bonne Chance!

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X