¿Cómo usar rutas relativas / absolutas en URL css?

86

Tengo un servidor de producción y desarrollo. El problema es la estructura del directorio.

Desarrollo:

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

Producción:

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

¿Cómo puedo tener una carpeta style.cssin cssque use en ambos servidores la misma ruta para la background: urlpropiedad? ¿Hay algún truco que pueda usar con rutas relativas?

css relative-path absolute-path nascar
fuente

Respuestas:

129

La URL es relativa a la ubicación del archivo CSS , por lo que esto debería funcionar para usted:

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

La URL relativa retrocede dos carpetas y luego a la imagescarpeta; debería funcionar para ambos casos, siempre que la estructura sea la misma.

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

Las URL parciales se interpretan en relación con la fuente de la hoja de estilo, no en relación con el documento.

Kobi
fuente
¿Funcionará esto si tengo que retroceder 2 pasos (se actualizó la respuesta) url (../../ images / image.jpg)?
nascar
@anothershrubery - lo siento, mi primer ejemplo fue defectuoso
nascar
@danip: debería funcionar, pero no tienes dos pasos desde http://domain.com/css/style.css. No estoy seguro de qué se puede hacer allí ... EDITAR: - sí, debería funcionar con la estructura actualizada, he actualizado la respuesta (solo otra ../, parece).
Kobi
9

Personalmente, arreglaría esto en el archivo .htaccess. Deberías tener acceso a eso.

Defina su URL CSS como tal:

url(/image_dir/image.png);

En su archivo .htacess, ponga:

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

o

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

dependiendo del sitio.

Garison Piatt
fuente
2

Tuve el mismo problema ... cada vez que quería publicar mi css ... tuve que hacer una búsqueda / reemplazo ... y la ruta relativa tampoco funcionaría para mí porque las rutas relativas eran diferentes desde el desarrollo hasta la producción.

Finalmente estaba cansado de hacer la búsqueda / reemplazo y creé un CSS dinámico (por ejemplo, www.mysite.com/css.php) es lo mismo, pero ahora puedo usar mis constantes php en el CSS. algo como

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

y no es una mala idea hacerlo dinámico porque ahora podría comprimirlo usando el compresor YUI sin perder el formato original en mi servidor de desarrollo.

¡Buena suerte!

complacido
fuente
13
¡No hay phpetiqueta en la pregunta! Es posible que OP no esté usando php en absoluto.
Bazzz
6
es sólo un exemple .. usted podría utilizar PHP, ASP, JSP .. la idea es la misma
pleasedontbelong
6
también podría ser estático.
jcuenod
3
Además, si esto está en un archivo CSS, entonces <?php **** ?>no se procesará
JD Vangsness