Фоновые изображения в CSS

CSS позволяет добавлять фоновые изображения на элементы, управлять их положением, размером и повторением.

Основные свойства

  • background-image — задает URL фонового изображения.
  • background-repeat — управляет повторением изображения (repeat, no-repeat, repeat-x, repeat-y).
  • background-position — положение изображения (например, top, center, bottom, left, right).
  • background-size — размер изображения (cover, contain, auto или конкретные значения).
  • background-attachment — фиксирование изображения при прокрутке (scroll, fixed, local).
  • background-color — цвет фона на случай, если изображение не загрузилось.
  • background — сокращенное свойство для всех параметров фона.

Пример использования

div.banner {
  background-image: url('banner.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 300px;
}

Резюме

  • Фоновые изображения делают страницу более визуально привлекательной.
  • Используйте background-size: cover для полного покрытия блока.
  • Не забывайте о background-color как резервном варианте.