Используя относительный URL в файле CSS, к какому расположению он относится?

Question

Когда вы определяете что-то вроде URL-адреса фонового изображения в файле CSS, когда используете относительный URL-адрес, где он находится относительно? Например:

Предположим, файл /stylesheets/base-styles.css содержит:

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

Если я включу эту таблицу стилей в различные документы с помощью <link ... /> будет ли относительный URL-адрес в файле CSS относительно документа таблицы стилей в /stylesheets/ или относительно текущего документа, в который он включен? Возможные пути, такие как:

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

Answer 1

Согласно W3:

Частичные URL-адреса интерпретируются относительно источника таблицы стилей, а не относительно документа

Поэтому, в ответ на ваш вопрос, это будет относительно /stylesheets/,

Если подумать об этом, это имеет смысл, поскольку файл CSS можно добавлять на страницы в разных каталогах, поэтому его стандартизация в файле CSS означает, что URL-адреса будут работать там, где связаны таблицы стилей.

Answer 2

Это относительно файла CSS.

Answer 3

Это относительно таблицы стилей, но я бы рекомендовал сделать URL-адреса относительно вашего URL:

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

Таким образом, вы можете перемещать файлы без необходимости их рефакторинга в будущем.

Answer 4

Для создания модульных таблиц стилей, которые не зависят от абсолютного местоположения ресурса, авторы могут использовать относительные URI. Относительные URI (как определено в [RFC3986]) преобразуются в полные URI с использованием базового URI. RFC 3986, раздел 5, определяет нормативный алгоритм для этого процесса. Для таблиц стилей CSS базовый URI - это таблица стилей, а не исходный документ.

Например, предположим следующее правило:

body { background: url("yellow") }

находится в таблице стилей, обозначенной URI:

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

Фон BODY исходного документа будет облицован любым изображением, описанным ресурсом, обозначенным URI

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

Пользовательские агенты могут отличаться в том, как они обрабатывают недопустимые URI или URI, которые обозначают недоступные или неприменимые ресурсы.

Взято из спецификации CSS 2.1.

Answer 5

Для таблиц стилей CSS базовый URI - это таблица стилей, а не исходный документ.

(Все остальное будет сломано, ИМНШО)

Answer 6

Одна проблема, которая может возникнуть и, казалось бы, сломать это, при использовании автоматической минимизации css. Путь запроса для минимизированного пакета может иметь путь, отличный от исходного CSS. Это может произойти автоматически, что может привести к путанице.

Путь сопоставленного запроса для минимизированного пакета должен быть "/originalcssfolder/minifiedbundlename", а не просто "minifiedbundlename".

Другими словами, назовите ваши пакеты так, чтобы они имели тот же путь (с /), что и исходная структура папок. Таким образом, любые внешние ресурсы, такие как шрифты и изображения, будут сопоставляться браузеру с исправлением URI. Альтернативой является использование абсолютного URL (ссылки в вашем CSS, но это обычно не желательно.

Answer 7

Это сработало для меня. добавив две точки и косую черту.

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

Answer 8

Попробуйте использовать:

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

Images Быть папкой с изображением, которое вы хотите опубликовать.