Фоновое изображение (background-image)

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

Опубликовано 17.03.2025
Просмотры 13
Автор
Рек. время прохождения 3 минуты
Упражнений 9
Комментарии 0
Тренажер CSS

Эта серия упражнений посвящена работе с фоновыми изображениями в CSS. Вы научитесь добавлять изображения на фон элементов, управлять их повторением, позиционированием и размером. Задания построены по принципу 'от простого к сложному' и помогут закрепить знания свойства `background-image` и связанных с ним свойств (`background-repeat`, `background-position`, `background-size`), а также их сокращенной записи `background`. Каждое задание представляет собой практическую задачу, где нужно дополнить CSS-код, чтобы достичь определенного визуального результата, который будет отображен в окне предпросмотра.

Список тем

Добавление фонового изображения

Начнем с основ. Ваша задача — установить фоновое изображение для элемента с классом `box`. Используйте свойство, отвечающее за установку фонового изображения.

CSS
.box {
  width: 300px;
  height: 250px;
  border: 1px solid #ccc;
  /* Добавьте фоновое изображение */
  input1: url("https://naytikurs.ru/img/1.png");
}
HTML
<div class="box"></div>
Чтобы задать фоновое изображение, используется свойство `background-image`. В качестве значения ему нужно передать функцию `url()` с путем к изображению внутри.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Использование функции url()

Фоновое изображение задано, но синтаксис не завершен. Вам нужно правильно обернуть URL изображения с помощью специальной функции CSS, чтобы браузер понял, что это путь к файлу.

CSS
.box {
  width: 300px;
  height: 250px;
  border: 1px solid #ccc;
  background-image: input1("https://naytikurs.ru/img/2.png");
}
HTML
<div class="box"></div>
Путь к изображению в свойстве `background-image` должен быть заключен в функцию `url()`. Например: `background-image: url("path/to/image.jpg");`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Отмена повторения фона

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

CSS
.box {
  width: 300px;
  height: 250px;
  border: 1px solid #ccc;
  background-image: url("https://naytikurs.ru/img/4.png");
  /* Отмените повторение фона */
  input1: input2;
}
HTML
<div class="box"></div>
Используйте свойство `background-repeat` со значением `no-repeat`, чтобы отменить повторение фонового изображения.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Позиционирование фона по центру

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

CSS
.box {
  width: 300px;
  height: 250px;
  border: 1px solid #ccc;
  background-image: url("https://naytikurs.ru/img/5.png");
  background-repeat: no-repeat;
  /* Разместите фон по центру */
  input1: input2;
}
HTML
<div class="box"></div>
Для управления положением фона используется свойство `background-position`. Чтобы разместить фон по центру, используйте значение `center` или `center center`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Масштабирование фона: contain

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

CSS
.box {
  width: 300px;
  height: 250px;
  border: 1px solid #ccc;
  background-image: url("https://naytikurs.ru/img/6.png");
  background-repeat: no-repeat;
  background-position: center;
  /* Масштабируйте фон, чтобы он полностью помещался */
  input1: input2;
}
HTML
<div class="box"></div>
Используйте свойство `background-size` со значением `contain`. Это значение масштабирует изображение так, чтобы оно целиком поместилось в контейнер, сохраняя пропорции.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Масштабирование фона: cover

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

CSS
.box {
  width: 300px;
  height: 250px;
  border: 1px solid #ccc;
  background-image: url("https://naytikurs.ru/img/7.png");
  background-repeat: no-repeat;
  background-position: center;
  /* Масштабируйте фон, чтобы он полностью покрывал элемент */
  background-size: input1;
}
HTML
<div class="box"></div>
Используйте свойство `background-size` со значением `cover`. Это значение масштабирует изображение так, чтобы оно полностью покрыло контейнер, сохраняя пропорции. Часть изображения может быть обрезана.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

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

Можно задать несколько свойств фона одновременно с помощью сокращенного свойства `background`. Установите фоновое изображение, отмените его повторение и разместите по центру, используя только одно свойство.

CSS
.box {
  width: 300px;
  height: 250px;
  border: 1px solid #ccc;
  /* Используйте сокращенную запись */
  input1: url("https://naytikurs.ru/img/8.png") input2 input3;
}
HTML
<div class="box"></div>
Используйте сокращенное свойство `background`. Значения указываются через пробел. Порядок обычно такой: `background-color background-image background-repeat background-position / background-size`. Не все значения обязательны. Например: `background: url(...) no-repeat center;`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Несколько фоновых изображений

CSS позволяет добавлять несколько фоновых изображений к одному элементу. Добавьте второе изображение к элементу `.box`. Изображения перечисляются через запятую.

CSS
.box {
  width: 300px;
  height: 250px;
  border: 1px solid #ccc;
  /* Добавьте второе изображение */
  background-image: url("https://naytikurs.ru/img/9.png")input1 url("https://naytikurs.ru/img/1.png");
  /* Стили для обоих изображений */
  background-repeat: no-repeat, no-repeat;
  background-position: left top, right bottom;
}
HTML
<div class="box"></div>
В свойстве `background-image` можно указать несколько URL через запятую. Первое указанное изображение будет находиться поверх остальных. Например: `background-image: url(img1.png), url(img2.png);`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Управление несколькими фонами

Когда используется несколько фоновых изображений, можно управлять каждым из них отдельно, перечисляя значения для `background-repeat`, `background-position`, `background-size` через запятую. Сделайте так, чтобы первое изображение не повторялось и было слева (`left`), а второе повторялось по горизонтали (`repeat-x`) и было справа (`right`).

CSS
.box {
  width: 300px;
  height: 250px;
  border: 1px solid #ccc;
  background-image: url("https://naytikurs.ru/img/4.png"), url("https://naytikurs.ru/img/5.png");
  /* Управляем повторением: первое - не повторять, второе - повторять по X */
  background-repeat: input1, input2;
  /* Управляем позицией: первое - слева, второе - справа */
  background-position: input3, input4;
}
HTML
<div class="box"></div>
Для управления свойствами нескольких фонов, перечисляйте значения через запятую в соответствующем свойстве (`background-repeat`, `background-position` и т.д.). Порядок значений соответствует порядку изображений в `background-image`. Например: `background-repeat: no-repeat, repeat; background-position: left, right;`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру