background-repeat: повторение фонового слоя
background-repeat определяет, повторяется ли фоновое изображение и по каким направлениям.
Назначение
background-repeat определяет, повторяется ли фоновое изображение и по каким направлениям.
Как это работает
repeat заполняет область повторениями, no-repeat показывает один экземпляр, repeat-x и repeat-y ограничивают направление. Значения space и round распределяют плитки по особым правилам промежутков или масштаба.
Пример
<style>
.stripe{height:130px;background-image:linear-gradient(#11694e 50%,#eaf4ee 50%);background-size:28px 28px;background-repeat:repeat-x;border:1px solid}
</style>
<div class="stripe" aria-label="Узор повторяется только по горизонтали"></div>Что должно получиться
Плитки идут по горизонтали в верхней полосе, остальная высота не заполняется повторениями. Положение ряда можно дополнительно изменить через background-position.
Граница применения и частая ошибка
Не ищите ошибку в размере файла, если маленькая картинка неожиданно размножилась: повторение является обычным поведением фона. Явно задавайте no-repeat для одиночного декоративного изображения.
Самостоятельная проверка
Сравните repeat-x, repeat-y и no-repeat на одной плитке. Затем измените размеры контейнера и проверьте, где появляются неполные плитки.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.