url

Функция url в CSS принимает адрес ресурса (изображения, шрифта, SVG) и используется в значениях свойств background-image, @font-face, content, mask и других.

Зачем нужно

CSS позволяет подключать внешние ресурсы — изображения, шрифты, SVG-иконки — прямо в стилях без HTML. url — единственный способ сослаться на файл из CSS. Понимание относительных и абсолютных путей в url критично для правильного отображения ресурсов.

Где используется

  • Фоновые изображения: background-image: url('bg.jpg')
  • Подключение шрифтов: @font-face { src: url('font.woff2') }
  • SVG-маски и форм: mask-image: url('mask.svg')
  • Псевдоэлементы с изображениями: content: url('icon.png')
  • CSS-курсоры: cursor: url('cursor.cur'), auto

Синтаксис

/* С кавычками (рекомендуется) */
background-image: url('images/photo.jpg');
background-image: url("images/photo.jpg");

/* Без кавычек (работает, если нет спецсимволов) */
background-image: url(images/photo.jpg);

/* Абсолютный URL */
background-image: url('https://example.com/bg.png');

/* Data URI (встроенный ресурс) */
background-image: url('data:image/svg+xml,...');

Относительные пути

Пути в url отсчитываются от CSS-файла, а не от HTML-страницы.

/* Структура:
   /css/style.css
   /images/bg.jpg
*/

/* В style.css — правильно */
background-image: url('../images/bg.jpg');

/* Неправильно (путь от HTML, а не от CSS) */
background-image: url('images/bg.jpg');

Примеры

Фоновое изображение

.hero {
  background-image: url('../images/hero.jpg');
  background-size: cover;
  background-position: center;
}

Подключение шрифта

@font-face {
  font-family: 'MyFont';
  src: url('../fonts/myfont.woff2') format('woff2'),
       url('../fonts/myfont.woff') format('woff');
}

SVG-иконка через content

.icon::before {
  content: url('../icons/arrow.svg');
  display: inline-block;
}

Частые ошибки

  1. Путь от HTML вместо CSS — чаще всего причина пропавших фонов; пути в CSS относительны к CSS-файлу.
  2. Кавычки при спецсимволах — если URL содержит пробелы, скобки или #, кавычки обязательны.
  3. Кэширование браузера — изменение файла без изменения имени может не применяться; используйте версионирование: url('bg.jpg?v=2').

Связанные темы

Ресурсы