Como usar caminhos relativos / absolutos em URLs css?

86

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?

nascar
fonte

Respostas:

129

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

Kobi
fonte
vai funcionar se eu tiver que voltar 2 passos (resposta atualizada) url (../../ images / image.jpg)?
nascar
@anothershrubery - desculpe, meu primeiro exemplo foi falho
nascar
@danip - deve funcionar, mas você não tem duas etapas do http://domain.com/css/style.css. Não tenho certeza do que pode ser feito lá ... EDITAR: - sim, deve funcionar com a estrutura atualizada, atualizei a resposta (apenas outra ../, ao que parece).
Kobi
9

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.

Garison Piatt
fonte
2

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!

satisfeito por pertencer
fonte
13
Não há phptag na pergunta! OP pode não estar usando php.
Bazzz
6
é apenas um exemplo .. você poderia usar php, asp, jsp .. a ideia é a mesma
happyontbelong
6
também pode ser estático.
jcuenod
3
Além disso, se estiver em um arquivo CSS, <?php **** ?>não será processado
JD Vangsness