Используя относительный 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 - папка с изображением, которое вы хотите опубликовать.