¿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

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