Como usar caminhos relativos / absolutos em URLs css?

Tenho um servidor de produção e desenvolvimento. O problema é a estrutura do diretório.

Desenvolvimento:

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

Produção:

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

Como posso ter uma pasta style.cssin cssque usa nos dois servidores o mesmo caminho para o background: urlimóvel? Existe algum truque que eu possa usar com caminhos relativos?

O URL é relativo à localização do arquivo CSS , então isso deve funcionar para você:

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

O URL relativo volta duas pastas para trás e, em seguida, para a imagespasta - deve funcionar para os dois casos, desde que a estrutura seja a mesma.

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

URLs parciais são interpretados em relação à fonte da folha de estilo, não em relação ao documento

Pessoalmente, eu corrigiria isso no arquivo .htaccess. Você deve ter acesso a isso.

Defina o seu URL CSS da seguinte forma:

url(/image_dir/image.png);

Em seu arquivo .htacess, coloque:

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

ou

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

dependendo do site.

Eu tive o mesmo problema ... toda vez que eu queria publicar meu css .. Eu tive que fazer uma busca / substituição .. e caminho relativo não funcionaria para mim porque os caminhos relativos eram diferentes de dev para produção.

Finalmente estava cansado de fazer a busca / substituição e criei um css dinâmico, (por exemplo, www.mysite.com/css.php) é o mesmo, mas agora eu poderia usar minhas constantes php no css. algo como

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

e não é uma má ideia torná-lo dinâmico porque agora eu poderia compactá-lo usando o compressor YUI sem perder o formato original no meu servidor de desenvolvimento.

Boa sorte!