• Теория
  • Теория

Повторение фона: background-repeat: round

Два интересных, но малоизвестных значения привычного свойства background-repeat, которое задаёт повторение фона, — это round и space.

Значение свойства по умолчанию background-repeat: repeat просто повторяет фоновую картинку по всей ширине и высоте блока. Если части повторяющейся картинки не помещаются в ширину блока, то они просто обрезаются.

Если задать значение background-repeat: round, то повторяющиеся картинки по краям блока обрезаться не будут, а равномерно растянутся или сожмутся по всей ширине и высоте, чтобы занять оставшееся пространство.

Кстати, background-repeat принимает в качестве значения два аргумента: режим повторения по горизонтали и по вертикали. Если передать один параметр, то он применится к обоим направлениям. Например:

/* повторение фона repeat по горизонтали и вертикали */
background-repeat: repeat;

/* повторение фона round по горизонтали и repeat по вертикали */
background-repeat: round repeat;

Давайте опробуем режим повторения round на практике.

Хотите досконально разбираться в разметке, знать о доступности, строить сетки на флексбоксах? Записывайтесь на профессиональный курс по вёрстке первого уровня, проходящий c 27 мая по 29 июля 2024. Цена 22 900 ₽

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Рамки и фоны. Погружение» тренажёра «Продвинутая работа с фонами и рамками» можно после регистрации и оформления подписки.