Яке розташування використовується відносною URL-адресою у CSS-файлі?

Визначаючи щось на зразок 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

Відповідно до W3 :

Часткові URL-адреси інтерпретуються відносно джерела таблиці стилів, а не щодо документа

Тому, відповідаючи на ваше запитання, це буде відносно /stylesheets/.

Якщо ви задумаєтесь про це, це має сенс, оскільки файл CSS можна було додати до сторінок у різних каталогах, тому стандартизація його у файлі CSS означає, що URL-адреси працюватимуть там, де пов'язані таблиці стилів.

Це відносно файлу CSS.

Це відносно таблиці стилів, але я рекомендую зробити URL-адреси відносно вашої URL-адреси:

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

Таким чином, ви можете переміщати свої файли, не потребуючи їх переробляти в майбутньому.

Для створення модульних таблиць стилів, які не залежать від абсолютного розташування ресурсу, автори можуть використовувати відносні URI. Відносні URI (як визначено в [RFC3986] ) вирішуються до повних URI, використовуючи базовий URI. Розділ 5 RFC 3986 визначає нормативний алгоритм цього процесу. Для таблиць стилів 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 специфікації .

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

(Все інше було б порушено, IMNSHO)

Одне питання, яке може виникнути, і, здавалося б, вирішити це, коли використовується автоматична мінімізація css. Шлях запиту для мінімізованого пакету може мати інший шлях, ніж вихідний css. Це може статися автоматично, тому це може спричинити плутанину.

Відображений шлях запиту для мінімізованого пакета повинен бути "/ originalcssfolder / minifiedbundlename", а не просто "minifiedbundlename".

Іншими словами, назвіть ваші пакети так, щоб вони мали такий самий шлях (з /), як і вихідна структура папки, таким чином, будь-які зовнішні ресурси, такі як шрифти, зображення, відображатимуть, щоб виправити URI браузером. Альтернативою є використання абсолютного URL-адреси (refs у вашому css, але це зазвичай не бажано.

Це працювало для мене. додавання двох крапок і косою рисою.

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

Спробуйте використовувати:

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

Images будучи папкою із зображенням, яке ви хочете опублікувати.