Usando una URL relativa en un archivo CSS, ¿a qué ubicación es relativa?

Cuando se define algo como la URL de una imagen de fondo en un archivo CSS, cuando se usa una URL relativa, ¿con qué relación? 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 ... /> será la URL relativa en el archivo CSS relativo al documento de hoja de estilo in /stylesheets/ or relativo al documento actual está incluido en? Posibles caminos como:

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

preguntado el 02 de junio de 09 a las 13:06

8 Respuestas

Según W3:

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

Por lo tanto, en respuesta a su pregunta, será relativo 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 en el archivo CSS significa que las URL funcionarán dondequiera que estén vinculadas las hojas de estilo.

Respondido 07 Feb 16, 04:02

parece que hay una excepción a la regla: -ms-behavior en IE :( - pkyeck

hay otra excepción: cuando la URL es el valor predeterminado de una propiedad personalizada. Di que defines .banner { background-image: var(--bgimg, url('images/default.jpg')); }, pero no defina un valor para --bgimg aún. Luego en la pagina /index.html, .banner buscará /images/default.jpg, pero en otra pagina /about/index.html a .banner se verá /about/images/default.jpg. muy roto en mi opinión. - charvey

corrección: el error de valor predeterminado anterior se corrigió en Chrome v60. - charvey

si su css está en un paquete, la ruta realmente no importa. No es donde crees que va a estar, ya nada es relativo. - Tod

Tuve problemas al usar propiedades: background: var(--primary-color-background) no-repeat center center url("maps.jpg"); Esto no funcionó en IOS y Safari. Solo camino absoluto /resources/maps.jpg funciona en Safari junto con una propiedad css. - Andy

Es relativo al archivo CSS.

Respondido el 02 de junio de 09 a las 17:06

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

respondido 04 nov., 15:21

¿Qué diferencia hace el "/" adicional en el frente? - Casebash

Al igual que los nombres de ruta en la línea de comandos, el / al principio de la ruta significa que apunta a un recurso absoluto en el servidor web actual. - David W Keith

De hecho, existe un caso en el que es mejor usar URI en relación con el archivo CSS. En mi caso, tengo un directorio "/ css /" donde pongo todos los datos CSS. Ahora, quiero probar nuevas funciones en el sitio web en una carpeta separada. Es difícil probar, por ejemplo, nuevas imágenes de fondo en la carpeta de prueba. Todo depende de tus necesidades... - Diego

Las rutas absolutas dificultan la colocación de la solución en una subcarpeta del dominio. Hay varias razones por las que desea admitir subcarpetas. Hace que sea más fácil hacer pruebas (como mencionó Diego) donde puede tener versiones / prelanzamientos anteriores ubicados en el mismo dominio que prod. Cambios futuros en los que los servidores proxy corporativos están configurados para admitir SSO, moviendo todas las soluciones a un dominio, etc. Especialmente con SSL, es posible que desee evitar la sobrecarga de mantener varios nombres de dominio. Para mí, estas consideraciones son mucho más importantes que "mover más fácilmente mi archivo .css". - Tedd Hansen

las imágenes y cosas así van a cdn de todos modos, así que esto es perfecto - Muhammad Umer

Para crear hojas de estilo modulares que no dependan de la ubicación absoluta de un recurso, los autores pueden usar URI relativas. URI relativos (como se define en [RFC3986]) se resuelven en URI completos mediante 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 la URI:

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

El fondo del BODY del documento de origen 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 inaplicables.

Tomado de la Especificación CSS 2.1.

Respondido el 20 de junio de 20 a las 10:06

Respondido el 02 de junio de 09 a las 17:06

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", no solo "minifiedbundlename".

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

Respondido el 27 de enero de 15 a las 04:01

¡Esto me ahorró un montón de tiempo! Gracias. Debería documentarse más: mjbates7

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

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

Respondido el 19 de junio de 18 a las 09:06

Eso solo funcionará para las páginas que están un directorio por debajo de la raíz. Para cualquier página en el nivel raíz o dos directorios hacia abajo, fallará. - SS64

Intente usar:

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

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

Respondido 10 ago 15, 18:08

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.