Картинка CSS: полное руководство от фона до крутых эффектов

Синтаксис и базовый пример

Основной синтаксис предельно прост. В качестве значения используется функция url(), внутри которой указывается путь к файлу.

.banner {
  background-image: url('images/flower-pink.webp');
  width: min(600px,100%);
  height: 300px;  
}

<div class="banner"></div>

Валидные форматы

CSS поддерживает все основные форматы изображений:

• JPEG (.jpg, .jpeg): Для фотографий и изображений с градиентами. Не поддерживает прозрачность.
• PNG (.png): Для изображений с прозрачностью (альфа-канал) или с резкими гранями (логотипы, иконки).
• SVG (.svg): Векторный формат. Идеален для иконок, логотипов и простой графики. Масштабируется без потери качества.
• GIF (.gif): Для простой анимации.
• WebP (.webp): Современный формат от Google. Обеспечивает лучшее сжатие, чем JPEG и PNG, с поддержкой прозрачности и анимации. Рекомендуется к использованию.
• AVIF (.avif): Новейший формат с еще более высокой степенью сжатия. Поддержка набирает обороты.

Пути и Data-URI

• Относительный путь: url('../assets/image.png') (относительно файла CSS).
• Абсолютный путь: url('/images/logo.svg') или url('https://site.com/img/bg.jpg').
• Data-URI: Позволяет встроить изображение прямо в CSS-код в виде base64-строки. Увеличивает размер CSS-файла, но избавляет от отдельного HTTP-запроса. Полезно для очень маленьких иконок.

.icon {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTIgMkM2LjQ4IDIgMiA2LjQ4IDIgMTJzNC40OCAxMCAxMCAxMCAxMC00LjQ4IDEwLTEwUzE3LjUyIDIgMTIgMnptMCAxOGMtNC40MSAwLTgtMy41OS04LThzMy41OS04IDgtOCA4IDMuNTkgOCA4LTMuNTkgOC04IDh6IiBmaWxsPSIjMDAwIi8+PC9zdmc+');
  width: 24px;
  height: 24px;
}

Множественные фоны

Вы можете наложить несколько фоновых изображений в одном свойстве, перечислив их через запятую. Первое изображение в списке будет отображаться сверху.

.layered-card {
  width: min(600px, 100%);
  height: 200px;
  background-image:
    url('logo.svg'), /* Верхний слой */
    url('snowflake.png'); /* Нижний слой */  
}

Само по себе background-image часто дает неудовлетворительный результат. Для полного контроля используется набор дополнительных свойств.

Свойство background-repeat

Управляет повторением изображения. Воспользуйтесь опциями в примере ниже, чтобы увидеть как меняется повторение картинки в зависимости от значения свойства background-repeat.

.hero {
  background-image: url('hero.jpg');
  background-repeat: no-repeat;
}

• repeat (по умолчанию): повторяется по осям X и Y.
• no-repeat: не повторяется.
• repeat-x / repeat-y: повторяется только по горизонтали или вертикали.
• space: равномерно распределяет копии, заполняя область без обрезки.
• round: масштабирует изображения, чтобы они заполнили область целое число раз.

Свойство background-position

Определяет начальную позицию фонового изображения. Значения задаются парами: горизонталь (left/center/right или %) и вертикаль (top/center/bottom или %).

.hero {
  background-image: url('hero.jpg');
  background-position: center top; /* Картинка центрирована по горизонтали и прижата к верху */
}

Можно использовать как абсолютные значения в пикселях (например, 20px 50px), так и относительные в процентах (например, 100% 100%), причем, в примере ниже, последнее объявление (100% 100%) имеет приоритет и размещает изображение в правом нижнем углу элемента.

.pin {
  background-image: url('pin.png');
  background-position: 20px 50px; /* 20px от левого края, 50px от верхнего */
  background-position: 100% 100%; /* В правом нижнем углу */
}

Свойство background-size

Ключевое свойство для адаптивности фона.

.banner {
  background-image: url('flower-pink.webp');
  background-size: auto; /* Исходный размер изображения */  
}

• auto (по умолчанию): исходный размер изображения.
• cover: масштабирует изображение с сохранением пропорций, чтобы оно полностью закрыло область. Части изображения могут быть обрезаны.
• contain: масштабирует изображение с сохранением пропорций, чтобы оно целиком поместилось в область. Могут появиться пустые поля.
• Конкретные значения: background-size: 200px 150px; (ширина, высота). Может нарушить пропорции.

Свойство background-attachment

Определяет, будет ли фон прокручиваться вместе с контентом или оставаться фиксированным, как в примере ниже.

Пример 7

• scroll (по умолчанию): фон прокручивается с элементом.
• fixed: фон фиксируется относительно области просмотра (viewport). Классический прием для параллакс-эффектов.
• local: фон прокручивается вместе с содержимым элемента (актуально для элементов с собственным скроллом).

Сокращенная запись: background

Позволяет задать все свойства в одной строке. Порядок не строгий, но общепринятый:

background: [color] [image] [position] / [size] [repeat] [attachment] [origin] [clip];

.box {
  /* Красный цвет будет показан, пока изображение не загрузится */
  background: #f00 url('bg.png') center center / cover no-repeat fixed;
}

При использовании сокращенной записи background-size указывается через слеш (/) после background-position. Неиспользованные свойства сбрасываются на значения по умолчанию.

Линейный градиент (linear-gradient)

Создает градиент вдоль воображаемой линии. Направление можно задать ключевыми словами (to bottom, to top right) или градусами (45deg, 180deg).

Пример 8

.button {
  background-image: linear-gradient(to right, #ff7e5f, #feb47b);
}
.advanced-gradient {
  /* Градиент под углом 45 градусов с несколькими цветовыми точками */
  background-image: linear-gradient(45deg, #6a11cb 0%, #2575fc 50%, #00d2ff 100%);
}

Радиальный градиент (radial-gradient)

Цвета расходятся из центральной точки. Можно задать форму (circle, ellipse) и размер (closest-side, farthest-corner).

Пример 9

.highlight {
  background-image: radial-gradient(circle at 10% 20%, violet, blue);
}

Конический градиент (conic-gradient)

Цвета вращаются вокруг центральной точки, как цветовой круг.

Пример 10

.pie-chart {
  background-image: conic-gradient(red 0% 30%, yellow 30% 70%, blue 70% 100%);
  border-radius: 50%;
  width: 150px;
  height: 150px;
}

Практическое применение

Градиенты часто комбинируют с фоновыми изображениями для затемнения, осветления или создания сложных текстур.

Пример 11

.dark-overlay {
  background-image:
    linear-gradient(to bottom, transparent, hsl(0 0% 0% / 0.8)),
    url('flower-pink.webp');
  background-size: cover;
}

Проблема

Без этих свойств изображение растягивается или сжимается, чтобы вписаться в заданные размеры, нарушая пропорции.

Значения object-fit

Это свойство управляет тем, как содержимое (изображение или видео) масштабируется и вписывается в свои заданные размеры. При этом важно, чтобы у элемента значения ширины и высоты были равны 100%. Смотри пример ниже.

fillcontaincovernonescale-down

Пример 12

.container img{
  width: 100%;
  height: 100%;
  object-fit: none;
}

• fill (по умолчанию): Растягивает изображение, чтобы заполнить контейнер. Пропорции игнорируются.
• contain: Масштабирует изображение, сохраняя пропорции, чтобы оно целиком поместилось в контейнер. Могут появиться пустые поля.
• cover: Масштабирует изображение, сохраняя пропорции, чтобы оно полностью закрыло контейнер. Части изображения обрезаются. Самый популярный вариант для галерей.
• none: Изображение сохраняет исходные размеры. Обрезается, если не помещается.
• scale-down: Поведение аналогично contain, но изображение никогда не увеличивается до размеров больше исходных.

Значения object-position

Работает в паре с object-fit: cover или none. Определяет, какая часть изображения будет видна в рамках контейнера после обрезки. Синтаксис аналогичен background-position.

.cover {
  object-fit: cover;
  object-position: 20% 80%; /* Акцентируем внимание на нижней части изображения */
}

Свойство clip-path

«Вырезает» элемент по заданной области. Все, что находится вне пути, становится невидимым.

Базовые фигуры:

Круг

Пример 13

.circle-img { clip-path: circle(40% at 50% 50%); }

Эллипс

Пример 14

.ellipse-img { clip-path: ellipse(100px 60px at center); }

Полигон

Пример 15

.polygon-img { clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%); }

Практическое использование: Создание рамок со скругленными углами сложной формы, вырезание изображений под шестиугольник для галереи.

Свойство mask-image

Более гибкий инструмент. Использует изображение или градиент в качестве маски, где альфа-канал (прозрачность) маски определяет видимость исходного элемента.

• Белый цвет/полная непрозрачность — элемент виден.
• Черный цвет/полная прозрачность — элемент скрыт.
• Серый цвет/полупрозрачность — элемент частично виден.

Градиент в качестве маски

Пример 16

.fade-mask img{
  /* Изображение плавно исчезает сверху вниз */
  mask-image: linear-gradient(to top, transparent 10%, black 90%);
  -webkit-mask-image: linear-gradient(to top, transparent 10%, black 90%); /* Для Safari */
}

PNG-файл в качестве маски

Пример 17

.texture-mask img{
   /* PNG с прозрачностью выступает в роли текстурированной маски */
  mask-image: url('logo.png');
  mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;  
}

Набор функций

Работа фильтра blur

Пример 18

.blur-img {
  filter: blur(5px);
}

• Размытие: filter: blur(5px);
• Яркость: filter: brightness(1.2); (>1 — ярче, <1 — темнее)
• Контрастность: filter: contrast(150%);
• Тень: filter: drop-shadow(8px 8px 10px rgba(0,0,0,0.5)); (Отлично для SVG и PNG!)
• Оттенки серого: filter: grayscale(100%);
• Поворот тона: filter: hue-rotate(90deg);
• Инверсия: filter: invert(100%);
• Непрозрачность: filter: opacity(50%); (аналог opacity, но для фильтров)
• Насыщенность: filter: saturate(200%);
• Сепия: filter: sepia(80%);

Комбинирование фильтров

Эффекты можно объединять в цепочку. Порядок имеет значение.

Пример 19

.vintage-photo {
  filter: contrast(1.1) saturate(1.3) sepia(0.3) hue-rotate(-5deg);
}

Плавные анимации

Фильтры можно анимировать с помощью transition, создавая плавные эффекты при наведении.

Пример 20

.photo {
  filter: grayscale(80%);
  transition: filter 0.5s ease;
}
.photo:hover {
  filter: grayscale(0%) brightness(1.05);
}

Теория

Псевдоэлементы генерируются внутри выбранного элемента и по умолчанию являются строчными (inline).

Добавление иконки через content

.external-link::after {
  content: url('external-icon.svg');
  margin-left: 5px;
  vertical-align: middle;
}

Изображение, добавленное через content, сложнее стилизовать (изменить размер, применить фильтр), чем фон псевдоэлемента. Чаще используется второй подход.

Добавление иконки через background

Пример 21

.external-link::after {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url('external-icon.svg');
  background-size: contain;
  margin-left: 5px;
}

Создание сложных композиций

Например, создание анимированной рамки для элемента с помощью двух псевдоэлементов и градиентов.

Пример 22

.complex-box {
    position: relative;
    width: 300px;
    height: 200px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 12px;
    padding: 20px;
    overflow: hidden;
}
.complex-box::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(
        transparent,
        #ff3366,
        transparent 30%,
        transparent 70%,
        #33ccff,
        transparent
    );
    animation: rotate 4s linear infinite;
}
.complex-box::after {
    content: '';
    position: absolute;
    inset: 2px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 10px;
}
.complex-box .inner {
    position: relative;
    z-index: 2;
    color: white;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.complex-box:hover::before {
    filter: brightness(1.5);
    animation-duration: 2s;
}

Адаптивные фоновые изображения с медиа-запросами

В простом примере ниже наглядно демонстрируется, как с помощью CSS-медиазапросов (@media) показывать разное фоновое изображение в зависимости от ширины экрана пользователя.

.banner {
  background-image: url('large-bg.jpg');
  background-size: cover;
}
@media (max-width: 768px) {
  .banner {
    /* На маленьких экранах загружаем менее детализированное изображение */
    background-image: url('small-bg.jpg');
  }
}

Работа с Retina-дисплеями

Использование image-set() для выбора изображения с учетом плотности пикселей.

.high-dpi-bg {
  background-image: url('standard.png');
  background-image: image-set(
    'standard.png' 1x,
    'retina.png' 2x
  );
}

Ленивая загрузка (Lazy Loading)

Для тега <img> используйте нативный атрибут loading="lazy". Для фоновых изображений потребуется JavaScript, наблюдающий за появлением элемента в viewport.

<!-- Ленивая загрузка для контентного изображения -->
<img src="product.jpg" loading="lazy" alt="Продукт">

Предзагрузка критических фонов

Укажите браузеру на необходимость ранней загрузки важного фона (например, для секции, которая является первым экраном страницы).

<head>
  <link rel="preload" as="image" href="critical-hero-background.jpg">
</head>

<img> vs background-image — ключевой выбор

Используйте <img>, если:

• Изображение является смысловым, контентным (фото в статье, логотип, товар в каталоге).
• Необходима индексация поисковыми системами и доступность (обязательный атрибут alt).
• Нужна ленивая загрузка (loading="lazy") без JS.

Используйте background-image, если:

• Изображение чисто декоративное (фон, узор, текстура).
• Требуются сложные техники вроде множественных фонов или наложения градиентов.
• Необходимо точное управление обрезкой и позицией (cover/contain с background-position).

Сводная таблица

CSS-рисование

Создание простейшей графики без изображений.

Пример 23

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #f06;
}

Динамические изображения с CSS-переменными (Custom Properties)

Позволяет легко менять фоны через JavaScript или контекстуально.

.card {
  --card-bg: url('default-bg.jpg');
  background-image: var(--card-bg);
}

// JavaScript
document.querySelector('.card').style.setProperty('--card-bg', 'url("new-bg.jpg")');

Работа с изображениями в CSS должна быть осознанной с точки зрения доступности.

• Фоновые изображения, добавленные через CSS, не несут семантической нагрузки и игнорируются скринридерами. Это их преимущество для декоративных элементов.
• Никогда не используйте background-image для важного контента (текст, инфографика, кнопки с текстом). Такую информацию скринридер не прочитает, а при отключенном CSS она пропадет.
• Если псевдоэлемент с фоновым изображением несет смысловую нагрузку (например, иконка-индикатор), для него нужно добавить доступный текст с помощью aria-label на родительском элементе или скрыть от скринридеров с помощью aria-hidden="true", если оно декоративное.

<!-- Декоративная иконка-псевдоэлемент -->
<button class="btn-close" aria-label="Закрыть">X</button>
<!-- Псевдоэлемент с фоном скроется, но aria-label на кнопке обеспечит доступность -->

Чек-лист для принятия решения

1. Что представляет собой изображение?
   Контент -> <img>. Декор -> background-image.
2. Как оно должно вести себя при изменении размеров контейнера?
   Заполнить с обрезкой -> cover (фон) или object-fit: cover (img). Вписать целиком -> contain.
3. Нужна ли нестандартная форма?
   Простой контур -> clip-path. Сложная текстура прозрачности -> mask-image.
4. Требуется ли цветокоррекция или эффект?
   Применяйте свойство filter.
5. Работает ли сайт на быстрых мобильных устройствах?
   Оптимизируйте: используйте loading="lazy", современные форматы (WebP, AVIF), image-set() и правильные размеры.

Следите за поддержкой формата AVIF, который предлагает беспрецедентное сжатие. Экспериментируйте с CSS Houdini (Paint API), который однажды позволит программировать собственные фоновые рисунки на JavaScript. Постоянно тестируйте производительность с помощью инструментов Lighthouse.

Грамотное использование изображений в CSS — это баланс между эстетикой, производительностью и доступностью. Освоив эти инструменты, вы получаете полный контроль над визуальной составляющей ваших веб-проектов.

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