Повторение фона (background-repeat)

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

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

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

Список тем

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

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

CSS
.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`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

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

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

CSS
.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`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

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

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

CSS
.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`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

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

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

CSS
.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

Свойство `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;
}
HTML
<div class="shorthand-box">
  <!-- Фон будет здесь -->
</div>
В составном свойстве `background` значение для режима повторения (например, `no-repeat`, `repeat-x`, `repeat-y`, `repeat`) указывается после URL изображения и/или фонового цвета. Например: `background: url(...) no-repeat;`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

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

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

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

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

CSS
.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`. Оно размещает копии изображения без масштабирования и добавляет равные промежутки между ними.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру