Фоновое изображение (background-image) [Модуль 4: Работа с фоном и визуальными эффектами]: Тренажер CSS

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

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

Список тем

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

id: 37345_css-bg-image-1

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

CSS

.box {
  width: 300px;
  height: 250px;
  border: 1px solid #ccc;
  /* Добавьте фоновое изображение */
  input1: url("https://naytikurs.ru/img/1.png");
}

                     .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()

id: 37345_css-bg-image-2

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

CSS

.box {
  width: 300px;
  height: 250px;
  border: 1px solid #ccc;
  background-image: input1("https://naytikurs.ru/img/2.png");
}

                     .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");`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

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

id: 37345_css-bg-image-3

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

CSS

.box {
  width: 300px;
  height: 250px;
  border: 1px solid #ccc;
  background-image: url("https://naytikurs.ru/img/4.png");
  /* Отмените повторение фона */
  input1: input2;
}

                     .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`, чтобы отменить повторение фонового изображения.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

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

id: 37345_css-bg-image-4

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

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;
}

                     .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

id: 37345_css-bg-image-5

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

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;
}

                     .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

id: 37345_css-bg-image-6

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

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;
}

                     .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

id: 37345_css-bg-image-7

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

CSS

.box {
  width: 300px;
  height: 250px;
  border: 1px solid #ccc;
  /* Используйте сокращенную запись */
  input1: url("https://naytikurs.ru/img/8.png") input2 input3;
}

                     .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;`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

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

id: 37345_css-bg-image-8

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;
}

                     .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);`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

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

id: 37345_css-bg-image-9

Когда используется несколько фоновых изображений, можно управлять каждым из них отдельно, перечисляя значения для `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;
}

                     .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;`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку