Usando URL relativo no arquivo CSS, para qual local é relativo?

Ao definir algo como um URL de imagem de plano de fundo em um arquivo CSS, ao usar um URL relativo, aonde ele é relativo? Por exemplo:

Suponha que o arquivo /stylesheets/base-styles.csscontenha:

div#header { 
    background-image: url('images/header-background.jpg');
}

Se eu incluir esse estilo em documentos diferentes através <link ... />vai a URL relativa no arquivo CSS ser em relação ao documento de estilo em /stylesheets/ou em relação ao documento atual é incluído para? Caminhos possíveis, como:

/item/details.html
/about/index.html
/about/extra/other.html
/index.html

De acordo com o W3 :

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

Portanto, em resposta à sua pergunta, será relativa a /stylesheets/.

Se você pensar sobre isso, isso faz sentido, já que o arquivo CSS pode ser adicionado a páginas em diretórios diferentes; portanto, padronizá-lo no arquivo CSS significa que os URLs funcionarão onde quer que as folhas de estilo estejam vinculadas.

É relativo ao arquivo CSS.

É relativo à folha de estilo, mas eu recomendo que os URLs sejam relativos ao seu URL:

div#header { 
  background-image: url(/images/header-background.jpg);
}

Dessa forma, você pode mover seus arquivos sem precisar refatorá-los no futuro.

Para criar folhas de estilo modulares que não dependem da localização absoluta de um recurso, os autores podem usar URIs relativos. URIs relativos (conforme definido em [RFC3986] ) são resolvidos para URIs completos usando um URI base. A RFC 3986, seção 5, define o algoritmo normativo para esse processo. Para folhas de estilo CSS, o URI base é o da folha de estilos, não o do documento de origem.

Por exemplo, suponha a seguinte regra:

body { background: url("yellow") }

está localizado em uma folha de estilos designada pelo URI:

http://www.example.org/style/basic.css

O plano de fundo do BODY do documento de origem será lado a lado com qualquer imagem descrita pelo recurso designado pelo URI

http://www.example.org/style/yellow

Os agentes do usuário podem variar na maneira como lidam com URIs ou URIs inválidos que designam recursos indisponíveis ou não aplicáveis.

Retirado da especificação do CSS 2.1 .

Para folhas de estilo CSS, o URI base é o da folha de estilos, não o do documento de origem.

(Qualquer outra coisa seria quebrada, IMNSHO)

Um problema que pode ocorrer e aparentemente interrompe isso é ao usar a minimização automática de css. O caminho da solicitação para o pacote configurável minificado pode ter um caminho diferente do css original. Isso pode acontecer automaticamente e causar confusão.

O caminho da solicitação mapeada para o pacote compactado minificado deve ser "/ originalcssfolder / minifiedbundlename" e não apenas "minifiedbundlename".

Em outras palavras, nomeie seus pacotes configuráveis ​​com o mesmo caminho (com o /) da estrutura de pastas original, desta forma, quaisquer recursos externos, como fontes e imagens, serão mapeados para corrigir URIs pelo navegador. A alternativa é usar o URL absoluto (refs no seu css, mas isso geralmente não é desejável).

Isso funcionou para mim. adicionando dois pontos e barra.

body{
    background: url(../images/yourimage.png);
}

Tente usar:

body {
  background-attachment: fixed;
  background-image: url(./Images/bg4.jpg);
}

Images sendo pasta segurando a imagem que você deseja publicar.