CSS background — фон элемента: цвет, картинка, позиция

background в CSS управляет фоном элемента: цветом, картинкой, градиентом, позицией и размером. Каждый аспект — отдельное свойство, или всё сразу через shorthand. Разбираем полный арсенал с примерами.

background-color — цвет фона

Самое простое свойство — задаёт цвет фона элемента. Принимает любой CSS-цвет: HEX, RGB, HSL, именованный цвет или transparent.

/* HEX */
div { background-color: #2563eb; }
div { background-color: #f9fafb; }

/* RGB и RGBA */
div { background-color: rgb(37, 99, 235); }
div { background-color: rgba(0, 0, 0, 0.5); }  /* полупрозрачный чёрный */

/* Именованные цвета */
div { background-color: white; }
div { background-color: lightgray; }

/* Прозрачный (сквозной) */
div { background-color: transparent; }

/* Практический пример */
.card       { background-color: #ffffff; }
.hero       { background-color: #1e293b; }
.alert-info { background-color: #dbeafe; }  /* светло-голубой */
.alert-ok   { background-color: #dcfce7; }  /* светло-зелёный */

background-image — картинка фоном

Устанавливает изображение в качестве фона. По умолчанию картинка повторяется (как плитка) — это изменяется свойством background-repeat.

/* Путь к файлу */
div { background-image: url('image.jpg'); }
div { background-image: url('/images/bg.png'); }
div { background-image: url('../assets/pattern.svg'); }

/* Внешний URL */
div { background-image: url('https://example.com/hero.jpg'); }

/* Градиент как background-image */
div { background-image: linear-gradient(135deg, #667eea, #764ba2); }

/* Убрать фоновое изображение */
div { background-image: none; }

background-repeat — повторение фона

div { background-repeat: repeat; }     /* по умолчанию: плитка во всех направлениях */
div { background-repeat: no-repeat; }  /* не повторять — одно изображение */
div { background-repeat: repeat-x; }   /* повторять только горизонтально */
div { background-repeat: repeat-y; }   /* повторять только вертикально */
div { background-repeat: space; }      /* повторять с равными отступами между */
div { background-repeat: round; }      /* подогнать размер чтобы влезло целое число копий */

/* Для hero с картинкой: */
.hero {
  background-image: url('hero.jpg');
  background-repeat: no-repeat;  /* одна картинка, без плитки */
}

background-size — размер фонового изображения

Одно из самых важных свойств. cover и contain — два ключевых значения для работы с картинками.

/* cover — заполнить весь элемент, сохраняя пропорции */
/* Картинка может быть обрезана по краям — но пустых мест нет */
.hero {
  background-size: cover;
  /* Используй для hero-секций и полноэкранных фонов */
}

/* contain — вписать целиком, сохраняя пропорции */
/* Картинка видна полностью — но могут быть пустые полосы */
.logo-section {
  background-size: contain;
  /* Используй для логотипов и иконок */
}

/* Конкретный размер */
div { background-size: 300px 200px; }   /* ширина высота */
div { background-size: 50%;            }  /* 50% ширины элемента */
div { background-size: auto 100px;     }  /* авто ширина, фиксированная высота */
div { background-size: 100% auto;      }  /* растянуть по ширине */

background-position — позиция фона

/* Именованные позиции */
div { background-position: center; }         /* по центру */
div { background-position: top; }            /* сверху по центру */
div { background-position: bottom; }         /* снизу по центру */
div { background-position: left; }           /* слева по центру */
div { background-position: right; }          /* справа по центру */
div { background-position: top left; }       /* угол */
div { background-position: center bottom; }  /* по центру снизу */

/* Проценты: X% Y% */
div { background-position: 50% 50%; }   /* = center */
div { background-position: 0% 100%; }   /* = left bottom */
div { background-position: 100% 0%; }   /* = right top */

/* Пиксели: X Y от левого верхнего угла */
div { background-position: 20px 40px; }
div { background-position: -10px center; }

/* Для hero: картинка центрируется по важной части */
.portrait-hero {
  background-position: center top;   /* лицо сверху, не обрезается */
}

background-attachment — прокрутка фона

/* scroll — фон прокручивается вместе со страницей (по умолчанию) */
div { background-attachment: scroll; }

/* fixed — фон остаётся на месте, контент прокручивается поверх */
/* Создаёт эффект параллакса */
.parallax {
  background-attachment: fixed;
  background-image: url('mountains.jpg');
  background-size: cover;
  background-position: center;
  height: 400px;
}

/* local — фон прокручивается с overflow контентом элемента */
.scrollable-box {
  background-attachment: local;
  overflow-y: auto;
  height: 200px;
}

background shorthand — всё в одной строке

Shorthand background объединяет все свойства. Порядок: color image repeat position/size attachment. Необязательные части можно опускать.

/* Полная запись */
div {
  background: #f9fafb url('bg.png') no-repeat center/cover fixed;
}

/* Только цвет */
div { background: #2563eb; }

/* Только картинка */
div { background: url('hero.jpg') center/cover no-repeat; }

/* Градиент */
div { background: linear-gradient(135deg, #667eea, #764ba2); }

/* Fallback цвет + картинка */
.hero {
  background: #1e293b url('hero.jpg') center/cover no-repeat;
  /* Если картинка не загрузится — тёмный фон */
}

Полный пример: hero-секция с картинкой

/* Стандартная hero-секция */
.hero {
  background: url('hero.jpg') center/cover no-repeat;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-align: center;
}

/* С тёмным оверлеем для читаемости текста */
.hero-overlay {
  background:
    linear-gradient(
      rgba(0, 0, 0, 0.5),  /* затемнение сверху */
      rgba(0, 0, 0, 0.7)   /* сильнее снизу */
    ),
    url('hero.jpg') center/cover no-repeat;
  height: 100vh;
  display: flex;
  align-items: flex-end;
  padding: 60px;
}

/* Сбоку — для текста слева */
.promo {
  background:
    linear-gradient(to right,
      rgba(0,0,0,0.8) 0%,
      rgba(0,0,0,0.0) 60%
    ),
    url('promo.jpg') center/cover no-repeat;
}

Несколько фонов на одном элементе

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

/* Паттерн поверх цветного фона */
.textured {
  background:
    url('dots.png') repeat top left,       /* паттерн точек (поверх) */
    linear-gradient(135deg, #667eea, #764ba2); /* градиент (снизу) */
}

/* Два изображения */
.layered {
  background:
    url('logo.png') no-repeat right 20px top 20px / 80px,  /* логотип в углу */
    url('bg.jpg') center/cover no-repeat;                   /* фото на фоне */
}

/* Декоративные элементы */
.decorative {
  background:
    radial-gradient(circle at 20% 50%, rgba(103,126,234,0.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(168,85,247,0.3) 0%, transparent 50%),
    #0f0c29;
}

Часто задаваемые вопросы о CSS background

Как сделать фоновую картинку на весь экран в CSS?

Используй комбинацию background-size: cover и min-height: 100vh. Для тела страницы — дополнительно background-attachment: fixed чтобы фон не повторялся при прокрутке:

body {
  background: url('bg.jpg') center/cover no-repeat fixed;
  min-height: 100vh;
  margin: 0;
}

/* Или для конкретной секции */
.fullscreen-section {
  background: url('bg.jpg') center/cover no-repeat;
  height: 100vh;
}

background-size: cover vs contain — в чём разница?

cover — картинка заполняет весь элемент, при необходимости обрезается по краям. Пустых мест нет. Используй для hero и фонов. contain — картинка вписывается целиком без обрезки, но могут появиться пустые полосы по бокам или сверху/снизу. Используй для логотипов и иконок, где важно видеть всё изображение.

Как сделать параллакс эффект на CSS?

Используй background-attachment: fixed — фон будет зафиксирован, а контент прокручиваться поверх. Это создаёт базовый параллакс без JavaScript. Важно: на мобильных устройствах iOS fixed работает некорректно — там лучше использовать JavaScript-параллакс или просто убирать fixed для мобильных через медиазапрос.

.parallax-section {
  background: url('mountains.jpg') center/cover no-repeat fixed;
  height: 500px;
}

/* Убрать fixed на мобильных */
@media (max-width: 768px) {
  .parallax-section {
    background-attachment: scroll;
  }
}