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

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

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

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

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

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

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