Коротко: путь к файлу в CSS указывают в url(), и он считается относительно самого CSS-файла, а не HTML. В HTML стили подключают тегом link с путём относительно страницы. Различают относительные пути и абсолютные — от корня или домена.
Виды путей
| Вид | Пример |
|---|---|
| Относительный | img/logo.png |
| Вверх на уровень | ../img/logo.png |
| От корня сайта | /img/logo.png |
| Абсолютный | https://site.ru/img/logo.png |
Путь в CSS считается от CSS-файла
css/
style.css
img/
bg.png
/* внутри style.css */
.hero {
background: url("img/bg.png");
}Если путь указать как в HTML, картинка «потеряется». В CSS всегда отсчитывайте от папки, где лежит сам файл стилей.
Вкладки: где какие пути
<link rel="stylesheet" href="css/style.css">
<img src="img/logo.png" alt="">В HTML путь считается от адреса страницы. Если страница лежит в подпапке, относительный путь может «поехать» — тогда используют путь от корня.
@font-face {
src: url("../fonts/font.woff2");
}.. поднимает на уровень выше. Это нужно, когда ресурсы лежат вне папки стилей — например, в соседней папке шрифтов.
php
echo get_template_directory_uri() . '/img/logo.png';В WordPress жёсткие пути нельзя — адрес сайта может меняться. Используйте функции вроде get_template_directory_uri(), они сами подставят нужный путь.
https://site.ru/img/logo.png работает, но при переезде на другой домен всё сломается. По возможности используйте относительные пути или функции WordPress.Практика: прописать путь
- Определите, где лежит ресурс и где файл, который на него ссылается.
- В CSS отсчитывайте путь от самого CSS-файла.
- В HTML — от адреса страницы.
- Для стабильности используйте путь от корня.
- В WordPress применяйте функции путей.
- Проверьте ресурс в инспекторе: нет ошибок 404 — путь верный.
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Картинка не видна | неверный путь | проверить в инспекторе |
| Работает на одной странице, нет на другой | относительный путь | использовать путь от корня |
| Всё «сломалось» после переезда | абсолютные пути | заменить на относительные |
| Шрифт не грузится | url() без учёта CSS |
отсчёт от CSS-файла |
| Нет слаша в начале | потеряли корень | добавить / |
Проверьте себя
../ в пути?
Вопросы и ответы
Он не привязан к домену, поэтому не ломается при переезде сайта на другой адрес. Абсолютный путь с доменом придётся менять по всему проекту.
Статья имеет другой URL и другую «глубину», поэтому относительный путь считается иначе. Используйте путь от корня сайта, он одинаков для всех страниц.
Потому что адрес сайта может меняться, а тема — быть в подпапке. Функции вроде get_template_directory_uri() подставляют корректный путь автоматически.
Откройте страницу в браузере и посмотрите консоль: если ресурс не загрузился, будет ошибка 404 с указанием адреса. Так сразу видно, куда «смотрит» путь.
Итоги
- В CSS путь в
url()считается от CSS-файла. - В HTML путь считается от адреса страницы.
../поднимает на уровень выше.- В WordPress используют функции путей, а не жёсткие адреса.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.