Cuando hago referencia a una imagen u otro archivo en un archivo CSS por una ruta relativa, ¿la ruta es relativa al archivo CSS o al archivo HTML utilizando el archivo CSS?¿Hay una ruta relativa en un archivo CSS relativo al archivo CSS?
Sí, es relativa a la .css
He aquí un ejemplo de diseño:
Page: page.htm ... does not matter where
CSS: /resources/css/styles.css
Image: /resources/images/image.jpg
CSS en styles.css:
div { background-image: url('../images/image.jpg');
Al archivo CSS.
Sí. Es relativo al archivo CSS. Añadiré que esto también incluye relativo al dominio en el que se encuentra el archivo CSS.
Así que si el CSS se hace referencia como:
<link href="http://www.otherdomain.com/css/example.css" type="text/css" rel="stylesheet" />
y contiene:
div { background-image: url('/images/image.jpg');
El fondo será:
La inclusión desde un dominio externo solo funcionará en algunos navegadores si ha configurado el encabezado para permitir inclusiones externas, debido a la misma política de origen –
perfecto, gracias. Justo lo que necesitaba saber. –
Gracias por la respuesta detallada. Estaba realmente confundido con el mismo problema, y aquí lo resolvió de una mejor manera. – AbdulAziz
Esto es realmente razonable, ya que permite hacer referencia al archivo _same_ '.css' de diferentes archivos' .html' (que pueden estar ubicados en lugares diferentes) sin tener que frenar rutas a objetos externos. – Davide