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

Question

Quando si definisce qualcosa come un URL dell'immagine di sfondo in un file CSS, quando si utilizza un URL relativo, dov'è relativo? Per esempio:

Supponiamo che il file contiene /stylesheets/base-styles.css:

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

Se includo questo foglio di stile in diversi documenti tramite <link ... /> sarà l'URL relativo al file CSS essere rispetto al documento di stile in /stylesheets/ oppure relativo al documento corrente incluso? Possibili percorsi come:

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

Answer 1

Secondo W3:

URL parziali vengono interpretati rispetto alla sorgente del foglio di stile, non rispetto al documento

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

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

Answer 2

È relativo al file CSS.

Answer 3

For CSS style sheets, the base URI is that of the style sheet, not that of the source document.

(Tutto il resto sarebbe rotto, IMNSHO)

Answer 4

Per 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.

Per esempio, supponiamo la seguente regola:

body { background: url("yellow") } 

si trova in un foglio di stile designato dalla URI:

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

Lo sfondo del BODY del documento sorgente sarà piastrellato con qualunque immagine è descritta dalla risorsa designata dagli agenti utente URI

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

può variano nel modo in cui gestiscono URI o URI non validi che designano risorse non disponibili o inapplicabili.

Tratto dallo CSS 2.1 spec.

Answer 5

E 'relativamente al foglio di stile, ma consiglio rendendo gli URL relativi al tuo URL:

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

In questo modo, è possibile spostare i file senza bisogno di refactoring loro in futuro.

Answer 6

Un problema che può verificarsi, e apparentemente rompere questo è quando si utilizza auto minimizzazione dei css. Il percorso della richiesta per il bundle minificato può avere un percorso diverso rispetto al css originale. Questo può accadere automaticamente in modo che possa causare confusione.

Il percorso di richiesta mappato per il bundle minificato deve essere "/ originalcssfolder/minifiedbundlename", non solo "minifiedbundlename".

In altre parole, denominare i pacchetti in modo che abbiano lo stesso percorso (con /) come struttura della cartella originale, in questo modo qualsiasi risorsa esterna come i tipi di carattere, le immagini verranno mappate per correggere gli URI dal browser. L'alternativa è quella di utilizzare URL assoluto (arbitri nel CSS, ma che di solito non è desiderabile

Answer 7

Prova utilizzando:..

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

Images essendo cartella che contiene l'immagine che si desidera inviare