Usando la URL relativa en el archivo CSS, ¿con qué ubicación es relativa?

Cuando se define algo como una URL de imagen de fondo en un archivo CSS, cuando se usa una URL relativa, ¿a dónde se relaciona? Por ejemplo:

Supongamos que el archivo /stylesheets/base-styles.csscontiene:

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

Si incluyo esta hoja de estilo en diferentes documentos vía <link ... />será la dirección URL relativa en el archivo CSS estar en relación con el documento de hoja de estilo en /stylesheets/o en relación con el documento actual que está incluido a? Posibles caminos como:

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

De acuerdo con W3 :

Las URL parciales se interpretan en relación con el origen de la hoja de estilo, no en relación con el documento

Por lo tanto, en respuesta a su pregunta, será relativa a /stylesheets/.

Si piensa en esto, tiene sentido, ya que el archivo CSS podría agregarse a páginas en diferentes directorios, por lo que estandarizarlo al archivo CSS significa que las URL funcionarán dondequiera que estén vinculadas las hojas de estilo.

Es relativo al archivo CSS.

Es relativo a la hoja de estilo, pero recomendaría hacer las URL relativas a su URL:

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

De esa manera, puede mover sus archivos sin necesidad de refactorizarlos en el futuro.

Para crear hojas de estilo modulares que no dependen de la ubicación absoluta de un recurso, los autores pueden usar URI relativos. Los URI relativos (como se define en [RFC3986] ) se resuelven en URI completos utilizando un URI base. RFC 3986, sección 5, define el algoritmo normativo para este proceso. Para las hojas de estilo CSS, el URI base es el de la hoja de estilo, no el del documento fuente.

Por ejemplo, suponga la siguiente regla:

body { background: url("yellow") }

se encuentra en una hoja de estilo designada por el URI:

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

El fondo del CUERPO del documento fuente se colocará en mosaico con cualquier imagen descrita por el recurso designado por el URI

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

Los agentes de usuario pueden variar en la forma en que manejan URI no válidos o URI que designan recursos no disponibles o no aplicables.

Tomado de la especificación CSS 2.1 .

Para las hojas de estilo CSS, el URI base es el de la hoja de estilo, no el del documento fuente.

(Cualquier otra cosa se rompería, IMNSHO)

Un problema que puede ocurrir, y aparentemente romper esto, es cuando se usa la minimización automática de css. La ruta de solicitud para el paquete minificado puede tener una ruta diferente a la del CSS original. Esto puede suceder automáticamente, por lo que puede causar confusión.

La ruta de solicitud asignada para el paquete minificado debe ser "/ originalcssfolder / minifiedbundlename" y no solo "minifiedbundlename".

En otras palabras, asigne un nombre a sus paquetes para que tengan la misma ruta (con el /) que la estructura de carpetas original, de esta forma cualquier recurso externo como fuentes, imágenes se asignarán a los URI correctos por el navegador. La alternativa es utilizar la URL absoluta (referencias en su CSS, pero eso no suele ser deseable.

Esto funcionó para mí. agregando dos puntos y barra.

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

Intenta usar:

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

Images siendo la carpeta que contiene la imagen que desea publicar.