Размер фона (background-size): Тренажер CSS

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

Эта серия упражнений посвящена свойству CSS `background-size`. Вы попрактикуетесь в управлении размерами фоновых изображений элементов. Задания варьируются от использования базовых ключевых слов, таких как `cover` и `contain`, до их комбинации с другими фоновыми свойствами для достижения нужного визуального эффекта. Вам будет предоставлен готовый HTML и CSS код с пропусками, которые нужно будет заполнить правильными свойствами или значениями, чтобы выполнить задание. Цель — закрепить понимание того, как `background-size` влияет на отображение фона.

Список тем

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

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

CSS

.container {
  width: 300px;
  height: 200px;
  border: 2px dashed #ccc;
  background-image: url("https://naytikurs.ru/img/1.png");
  background-repeat: no-repeat; /* Добавлено для ясности эффекта */
  input1: input2;
}

                     .container {
  width: 300px;
  height: 200px;
  border: 2px dashed #ccc;
  background-image: url("https://naytikurs.ru/img/1.png");
  background-repeat: no-repeat; /* Добавлено для ясности эффекта */
  input1: input2;
}

HTML

<div class="container"></div>

Чтобы изображение полностью покрыло контейнер, используйте свойство `background-size` со значением `cover`. Вам нужно вписать и имя свойства (`input1`), и его значение (`input2`).

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

Результат

Сообщения

Выполнить

Отметить решенным

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

Полное вмещение в контейнер

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

CSS

.container {
  width: 300px;
  height: 200px;
  border: 2px dashed #ccc;
  background-image: url("https://naytikurs.ru/img/2.png");
  background-repeat: no-repeat; /* Добавлено для ясности эффекта */
  background-position: center; /* Центрируем для наглядности */
  input1: input2;
}

                     .container {
  width: 300px;
  height: 200px;
  border: 2px dashed #ccc;
  background-image: url("https://naytikurs.ru/img/2.png");
  background-repeat: no-repeat; /* Добавлено для ясности эффекта */
  background-position: center; /* Центрируем для наглядности */
  input1: input2;
}

HTML

<div class="container"></div>

Чтобы изображение целиком поместилось в контейнер с сохранением пропорций, используйте свойство `background-size` со значением `contain`. Укажите имя свойства в `input1` и значение в `input2`.

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

Результат

Сообщения

Выполнить

Отметить решенным

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

Укажите свойство для `cover`

В коде уже задано значение `cover`, которое масштабирует фон для полного покрытия элемента. Вам нужно указать правильное CSS свойство, которое принимает это значение, чтобы стиль применился корректно к элементу `.box`.

CSS

.box {
  width: 250px;
  height: 250px;
  border: 1px solid blue;
  background-image: url("https://naytikurs.ru/img/4.png");
  background-repeat: no-repeat;
  input1: cover;
}

                     .box {
  width: 250px;
  height: 250px;
  border: 1px solid blue;
  background-image: url("https://naytikurs.ru/img/4.png");
  background-repeat: no-repeat;
  input1: cover;
}

HTML

<div class="box"></div>

Значение `cover` используется свойством `background-size`. Впишите имя этого свойства в `input1`.

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

Результат

Сообщения

Выполнить

Отметить решенным

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

Укажите значение для `contain`

Элементу `.card` задано фоновое изображение. Используйте свойство `background-size`, чтобы изображение полностью поместилось внутри элемента, сохранив пропорции. Впишите необходимое ключевое слово в `input1`.

CSS

.card {
  width: 320px;
  height: 180px;
  border: 1px solid green;
  background-image: url("https://naytikurs.ru/img/5.png");
  background-repeat: no-repeat;
  background-position: top left;
  background-size: input1;
}

                     .card {
  width: 320px;
  height: 180px;
  border: 1px solid green;
  background-image: url("https://naytikurs.ru/img/5.png");
  background-repeat: no-repeat;
  background-position: top left;
  background-size: input1;
}

HTML

<div class="card"></div>

Чтобы изображение целиком поместилось в контейнер с сохранением пропорций, используется ключевое слово `contain`. Впишите его в `input1`.

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

Результат

Сообщения

Выполнить

Отметить решенным

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

Фиксированная ширина, автоматическая высота

Задайте фоновому изображению элемента `.item` ширину 150px. Высота должна подобраться автоматически для сохранения пропорций изображения. Заполните пропуски: имя свойства (`input1`) и ключевое слово для автоматической высоты (`input2`).

CSS

.item {
  width: 280px;
  height: 200px;
  border: 1px solid red;
  background-image: url("https://naytikurs.ru/img/6.png");
  background-repeat: no-repeat;
  input1: 150px input2;
}

                     .item {
  width: 280px;
  height: 200px;
  border: 1px solid red;
  background-image: url("https://naytikurs.ru/img/6.png");
  background-repeat: no-repeat;
  input1: 150px input2;
}

HTML

<div class="item"></div>

Используйте свойство `background-size`. Первым значением укажите заданную ширину (она уже есть в коде), а вторым — ключевое слово `auto` для автоматического подбора высоты. Впишите `background-size` в `input1` и `auto` в `input2`.

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

Результат

Сообщения

Выполнить

Отметить решенным

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

Фиксированная высота, автоматическая ширина

Установите высоту фонового изображения для элемента `.panel` равной 100px. Ширина должна быть рассчитана автоматически, чтобы сохранить исходные пропорции изображения. Заполните пропуски: имя свойства (`input1`) и ключевое слово для автоматической ширины (`input2`).

CSS

.panel {
  width: 300px;
  height: 150px;
  border: 1px solid purple;
  background-image: url("https://naytikurs.ru/img/7.png");
  background-repeat: no-repeat;
  input1: input2 100px;
}

                     .panel {
  width: 300px;
  height: 150px;
  border: 1px solid purple;
  background-image: url("https://naytikurs.ru/img/7.png");
  background-repeat: no-repeat;
  input1: input2 100px;
}

HTML

<div class="panel"></div>

Используйте свойство `background-size`. Первым значением укажите ключевое слово `auto` для автоматического подбора ширины, а вторым — заданную высоту (она уже есть в коде). Впишите `background-size` в `input1` и `auto` в `input2`.

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

Результат

Сообщения

Выполнить

Отметить решенным

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

Размер и запрет повторения

Задайте фоновому изображению элемента `.widget` размер 80px на 60px и убедитесь, что оно не повторяется. Заполните пропуски: имя свойства для размера (`input1`), имя свойства для повторения (`input2`) и значение для запрета повторения (`input3`).

CSS

.widget {
  width: 250px;
  height: 150px;
  border: 1px dashed orange;
  background-image: url("https://naytikurs.ru/img/8.png");
  input1: 80px 60px;
  input2: input3;
}

                     .widget {
  width: 250px;
  height: 150px;
  border: 1px dashed orange;
  background-image: url("https://naytikurs.ru/img/8.png");
  input1: 80px 60px;
  input2: input3;
}

HTML

<div class="widget"></div>

Для задания размера используйте `background-size` со значениями `80px 60px` (они уже указаны). Для управления повторением используйте свойство `background-repeat` со значением `no-repeat`. Впишите `background-size` в `input1`, `background-repeat` в `input2` и `no-repeat` в `input3`.

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

Результат

Сообщения

Выполнить

Отметить решенным

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

Вместить и центрировать фон

Сделайте так, чтобы фоновое изображение элемента `.display` полностью помещалось внутри него (`contain`), сохраняя пропорции, и при этом было выровнено по центру как по горизонтали, так и по вертикали. Заполните пропуски: имя свойства для размера (`input1`), значение для вмещения (`input2`) и имя свойства для позиционирования (`input3`).

CSS

.display {
  width: 350px;
  height: 250px;
  border: 2px solid teal;
  background-image: url("https://naytikurs.ru/img/9.png");
  background-repeat: no-repeat;
  input1: input2;
  input3: center;
}

                     .display {
  width: 350px;
  height: 250px;
  border: 2px solid teal;
  background-image: url("https://naytikurs.ru/img/9.png");
  background-repeat: no-repeat;
  input1: input2;
  input3: center;
}

HTML

<div class="display"></div>

Используйте `background-size` со значением `contain` для масштабирования. Используйте `background-position` со значением `center` для выравнивания. Впишите `background-size` в `input1`, `contain` в `input2` и `background-position` в `input3`.

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

Результат

Сообщения

Выполнить

Отметить решенным

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