Utilizzando l'URL relativo nel file CSS, a quale posizione è relativo?

Quando si definisce qualcosa come un URL di immagine di sfondo in un file CSS, quando si utilizza un URL relativo, a che punto è relativo? Per esempio:

Supponiamo che il file /stylesheets/base-styles.csscontenga:

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

Se includo questo foglio di stile in diversi documenti via <link ... />sarà l'URL relativo al file CSS sia rispetto al documento foglio di stile in /stylesheets/o relativo al documento corrente è incluso a? Percorsi possibili come:

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

Secondo W3 :

Gli URL parziali vengono interpretati in relazione all'origine del foglio di stile, non in relazione al documento

Pertanto, in risposta alla tua domanda, sarà relativa a /stylesheets/.

Se ci pensate, questo ha senso, poiché il file CSS potrebbe essere aggiunto a pagine in diverse directory, quindi standardizzarlo con il file CSS significa che gli URL funzioneranno ovunque i fogli di stile siano collegati.

È relativo al file CSS.

È relativo al foglio di stile, ma ti consiglio di creare gli URL relativi al tuo URL:

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

In questo modo, puoi spostare i tuoi file senza doverli riformattare in futuro.

Al fine di creare fogli di stile modulari che non dipendono dalla posizione assoluta di una risorsa, gli autori possono utilizzare URI relativi. Gli URI relativi (come definiti in [RFC3986] ) vengono risolti in URI completi utilizzando un URI di base. RFC 3986, sezione 5, definisce l'algoritmo normativo per questo processo. Per i fogli di stile CSS, l'URI di base è quello del foglio di stile, non quello del documento di origine.

Ad esempio, supponiamo che la seguente regola:

body { background: url("yellow") }

si trova in un foglio di stile designato dall'URI:

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

Lo sfondo del BODY del documento di origine verrà piastrellato con qualsiasi immagine descritta dalla risorsa designata dall'URI

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

I programmi utente possono variare nel modo in cui gestiscono URI o URI non validi che designano risorse non disponibili o inapplicabili.

Tratto dalle specifiche CSS 2.1 .

Per i fogli di stile CSS, l'URI di base è quello del foglio di stile, non quello del documento di origine.

(Tutto il resto sarebbe rotto, IMNSHO)

Un problema che può verificarsi e che sembra interromperlo è quando si utilizza la minimizzazione automatica dei CSS. Il percorso della richiesta per il bundle minimizzato può avere un percorso diverso rispetto al css originale. Ciò può accadere automaticamente, quindi può creare confusione.

Il percorso della richiesta mappata per il bundle minimizzato dovrebbe essere "/ originalcssfolder / minifiedbundlename" non solo "minifiedbundlename".

In altre parole, nomina i tuoi bundle in modo che abbiano lo stesso percorso (con /) della struttura di cartelle originale, in questo modo tutte le risorse esterne come i caratteri, le immagini verranno mappate per correggere gli URI dal browser. L'alternativa è usare l'URL assoluto (rif nel tuo CSS ma che di solito non è desiderabile.

Questo ha funzionato per me. aggiungendo due punti e una barra.

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

Prova a usare:

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

Images essendo una cartella che contiene l'immagine che desideri pubblicare.