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

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

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

Список тем

Повторение фона по горизонтали

id: 37346_bg-repeat-1

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

CSS

.container {
  width: 100%;
  height: 300px;
  border: 1px dashed #ccc;
  background-image: url("https://naytikurs.ru/img/8.png");
  background-repeat: input1;
}

                     .container {
  width: 100%;
  height: 300px;
  border: 1px dashed #ccc;
  background-image: url("https://naytikurs.ru/img/8.png");
  background-repeat: input1;
}

HTML

<div class="container">
  <!-- Фон будет здесь -->
</div>

Чтобы фоновое изображение повторялось только по горизонтали, используйте свойство `background-repeat` со значением `repeat-x`.

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

Результат

Сообщения

Выполнить

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

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

id: 37346_bg-repeat-2

Аналогично предыдущему заданию, но теперь фоновое изображение должно повторяться только по вертикальной оси (ось Y), заполняя всю высоту блока.

CSS

.content-box {
  width: 100%;
  height: 300px;
  border: 1px dashed #aaa;
  background-image: url("https://naytikurs.ru/img/9.png");
  background-repeat: input1;
}

                     .content-box {
  width: 100%;
  height: 300px;
  border: 1px dashed #aaa;
  background-image: url("https://naytikurs.ru/img/9.png");
  background-repeat: input1;
}

HTML

<div class="content-box">
  <!-- Фон будет здесь -->
</div>

Для повторения фона только по вертикали используйте значение `repeat-y` для свойства `background-repeat`.

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

Результат

Сообщения

Выполнить

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

Отключение повторения фона

id: 37346_bg-repeat-3

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

CSS

.card {
  width: 100%;
  height: 300px;
  border: 1px solid blue;
  background-image: url("https://naytikurs.ru/img/1.png");
  /* Укажите здесь, чтобы фон не повторялся */
  background-repeat: input1;
}

                     .card {
  width: 100%;
  height: 300px;
  border: 1px solid blue;
  background-image: url("https://naytikurs.ru/img/1.png");
  /* Укажите здесь, чтобы фон не повторялся */
  background-repeat: input1;
}

HTML

<div class="card">
  <!-- Фон будет здесь -->
</div>

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

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

Результат

Сообщения

Выполнить

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

Повторение фона по обеим осям (по умолчанию)

id: 37346_bg-repeat-4

Иногда нужно явно указать стандартное поведение повторения фона — по обеим осям (горизонтальной и вертикальной). Заполните пропуск так, чтобы фоновая картинка заполняла весь блок, повторяясь во всех направлениях.

CSS

.pattern-bg {
  width: 100%;
  height: 300px;
  border: 1px dashed green;
  background-image: url("https://naytikurs.ru/img/7.png");
  /* Укажите значение для повторения по обеим осям */
  input1: input2;
}

                     .pattern-bg {
  width: 100%;
  height: 300px;
  border: 1px dashed green;
  background-image: url("https://naytikurs.ru/img/7.png");
  /* Укажите значение для повторения по обеим осям */
  input1: input2;
}

HTML

<div class="pattern-bg">
  <!-- Фон будет здесь -->
</div>

Значение по умолчанию для `background-repeat` — это `repeat`. Оно заставляет фон повторяться и по горизонтали, и по вертикали.

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

Результат

Сообщения

Выполнить

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

Использование shorthand свойства background

id: 37346_bg-repeat-5

Свойство `background` позволяет задать несколько фоновых характеристик одновременно, включая режим повторения. Допишите код так, чтобы фоновое изображение `5.png` не повторялось, используя только свойство `background`.

CSS

.shorthand-box {
  width: 100%;
  height: 300px;
  border: 1px solid orange;
  /* Используйте shorthand свойство background */
  background: url("https://naytikurs.ru/img/5.png") input1;
}

                     .shorthand-box {
  width: 100%;
  height: 300px;
  border: 1px solid orange;
  /* Используйте shorthand свойство background */
  background: url("https://naytikurs.ru/img/5.png") input1;
}

HTML

<div class="shorthand-box">
  <!-- Фон будет здесь -->
</div>

В составном свойстве `background` значение для режима повторения (например, `no-repeat`, `repeat-x`, `repeat-y`, `repeat`) указывается после URL изображения и/или фонового цвета. Например: `background: url(...) no-repeat;`.

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

Результат

Сообщения

Выполнить

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

Повторение с растягиванием (round)

id: 37346_bg-repeat-6

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

CSS

.special-repeat {
  width: 100%;
  height: 300px;
  border: 1px dashed purple;
  background-image: url("https://naytikurs.ru/img/4.png");
  background-repeat: input1;
}

                     .special-repeat {
  width: 100%;
  height: 300px;
  border: 1px dashed purple;
  background-image: url("https://naytikurs.ru/img/4.png");
  background-repeat: input1;
}

HTML

<div class="special-repeat">
  <!-- Фон будет здесь -->
</div>

Значение `round` для свойства `background-repeat` масштабирует изображение так, чтобы оно поместилось целое число раз в области фона.

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

Результат

Сообщения

Выполнить

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

Повторение с интервалами (space)

id: 37346_bg-repeat-7

Еще один специальный режим повторения. Сделайте так, чтобы фоновое изображение повторялось как можно больше раз без масштабирования и обрезки. Если остается свободное место, оно должно быть равномерно распределено между копиями изображения.

CSS

.spaced-repeat {
  width: 100%;
  height: 300px;
  border: 1px solid teal;
  background-image: url("https://naytikurs.ru/img/6.png");
  input1: input2;
}

                     .spaced-repeat {
  width: 100%;
  height: 300px;
  border: 1px solid teal;
  background-image: url("https://naytikurs.ru/img/6.png");
  input1: input2;
}

HTML

<div class="spaced-repeat">
  <!-- Фон будет здесь -->
</div>

Используйте значение `space` для свойства `background-repeat`. Оно размещает копии изображения без масштабирования и добавляет равные промежутки между ними.

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

Результат

Сообщения

Выполнить

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