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

Фоновые изображения в HTML задаются с помощью стилей CSS и позволяют украсить внешний вид веб-страниц, делая их визуально привлекательными и выразительными.

Фоновое изображение можно задать почти любому элементу HTML.

Задание фонового изображения элементу HTML

Чтобы установить фоновый рисунок для элемента HTML, используется HTML атрибут style и свойство CSS background-image:

Пример:
Добавляем фоновый рисунок к элементу <div>:

<div style="background-image: url('img_girl.jpg'); width: 300px; height: 200px;">Содержание блока</div>

Более удобным и правильным вариантом считается задание фонового изображения через элемент <style> в разделе <head>:

Пример:
Определим фоновый рисунок в элементе <style>:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Фоновые изображения</title>
  <style>
    p {
      background-image: url('img_girl.jpg');
    }
  </style>
</head>
<body>
  <h1>Заголовок страницы</h1>
  <p>Основной текст страницы.</p>
</body>
</html>

Фоновое изображения для всей страницы

Если вы хотите, чтобы фоновым изображением была покрыта вся страница целиком, задайте фоновый рисунок для элемента <body>:

Пример:
Устанавливаем фоновый рисунок для всей страницы:

<style>
body {
  background-image: url('img_girl.jpg');
}
</style>

Внешний CSS-файл

Часто встречается ситуация, когда таблица стилей вынесена в отдельный файл (обычно с расширением .css):

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Фоновые изображения</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <!-- Содержимое страницы -->
</body>
</html>

А в файле styles.css прописывается следующее правило:

body {
  background-image: url('../images/bg.png');
}

Свойства для работы с фоновыми изображениями

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

1. background-color — Цвет фона

Иногда бывает удобно комбинировать изображение с цветом фона, создавая интересные визуальные эффекты:

body {
  background-color: #f5f5f5;
  background-image: url('images/bg.png');
}

2. background-position — Позиционирование фонового изображения

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

Процентные единицы: определяют позицию изображения относительно родительского контейнера.
Абсолютные единицы: задают координаты (например, верх, лево, право, низ).
Ключевые слова: можно использовать комбинации таких значений, как top, center, bottom, left, right.

Примеры:

.element {
  background-image: url('bg.png');
  background-position: 50% 50%; /* центр изображения */
}

.anotherElement {
  background-image: url('bg.png');
  background-position: right bottom; /* правая нижняя позиция */
}

3. background-repeat — Повторение фонового изображения

Определяет, каким образом изображение должно повторяться по оси X и Y:

repeat: повторяется как по вертикали, так и по горизонтали.
no-repeat: изображение не повторяется.
repeat-x: повторение только по горизонтали.
repeat-y: повторение только по вертикали.
space: равномерно распределяет копии изображения, оставляя пустоты между ними.
round: также равномерно распределяет изображение, изменяя его размер, чтобы заполнить пространство.

Пример:

.section {
  background-image: url('pattern.png');
  background-repeat: repeat-x; /* только по горизонтали */
}

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

Контролирует масштабирование фонового изображения. Может принимать следующие значения:

auto: сохраняет оригинальные пропорции изображения.
contain: уменьшает изображение, сохраняя пропорции, так, чтобы оно помещалось в область целиком.
cover: увеличивает изображение настолько, насколько нужно, чтобы покрыть всю область, сохранив пропорции.
ширина и высота: конкретные значения ширины и высоты (в px, %, em и т.п.)

Пример:

.container {
  background-image: url('bg.jpg');
  background-size: cover; /* Картинка растянута на весь контейнер */
}

5. background-attachment — Фиксация фонового изображения

Управляет поведением фонового изображения при скроллинге страницы:

scroll: изображение перемещается вместе с контентом.
fixed: изображение остаётся неподвижным относительно окна браузера.
local: фон движется синхронно с внутренним содержимым блока.

Пример:

body {
  background-image: url('stars.jpg');
  background-attachment: fixed; /* Звезды остаются статичными при прокручивании */
}

Кроме этого CSS предоставляет большое количество других дополнительных свойств для точного управления поведением фоновых изображений в HTML-документе.

Повтор фона

Если ваше изображение меньше размера элемента, оно повторится горизонтально и вертикально до конца элемента:

Пример:
Повторение фонового рисунка:

body {
  background-image: url('example_img_girl.jpg');
}

Чтобы предотвратить повторение фонового изображения, установите значение свойства background-repeat равным no-repeat:

Пример:
Отключение повтора фонового рисунка:

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

Полное покрытие фона

Если требуется, чтобы фоновый рисунок покрывал весь элемент, используйте свойство background-size со значением cover.

Кроме того, чтобы убедиться, что элемент всегда покрыт полностью, добавьте свойство background-attachment со значением fixed:

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

Пример:
Покрытие фона без растяжения:

body {
  background-image: url('img_girl.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

Растяжение фона

Если нужно, чтобы фон растягивался, заполняя весь элемент, задайте значение свойства background-size равным 100% 100%:

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

Пример:
Растягивание фона на весь элемент:

body {
  background-image: url('img_girl.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
}