html - relativas - Usando la URL relativa en el archivo CSS, ¿a qué ubicación está relacionada?

rutas relativas css

Question

Cuando se define algo así como una URL de imagen de fondo en un archivo CSS, cuando se usa una URL relativa, ¿a qué se refiere? Por ejemplo:

Supongamos que el archivo /stylesheets/base-styles.css contiene:

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

Si incluyo esta hoja de estilo en diferentes documentos a través de <link ... /> ¿la URL relativa en el archivo CSS será relativa al documento de la hoja de estilo en /stylesheets/ o al documento actual que está incluido? Posibles caminos como:

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

Answer 1

Para crear hojas de estilo modulares que no dependen de la ubicación absoluta de un recurso, los autores pueden usar URIs relativos. Los URI relativos (como se definen 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, supongamos 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 BODY del documento de origen se archivará con la imagen que describa el recurso designado por el URI

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

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

Tomado de la especificación CSS 2.1 .

Answer 2

Es relativo a la hoja de estilo, pero recomendaría que las URL se relacionen con 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.

Answer 3

Es relativo al archivo CSS.

Answer 4

Esto funcionó para mí. Añadiendo dos puntos y barra.

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

Answer 5

Según W3 :

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

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

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

Answer 6

Trate de usar:

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

Images son carpetas que contienen la imagen que desea publicar.

Answer 7

Un problema que puede ocurrir, y aparentemente rompe 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 de 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" no solo "minifiedbundlename".

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

Answer 8

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

(Cualquier otra cosa se rompería, IMNSHO)