background-repeat

Вместе со свойством background-image в CSS, обычно используется background-repeat и оно определяет способ повторяемости фонового изображения. Например:

html {
  background-image: url(image.png);
  background-repeat: repeat-x; 
}

Возможные значения этого свойства:

• repeat или repeat repeat: изображение повторяется в обоих направлениях. Это значение по умолчанию.
• repeat-x или repeat no-repeat: изображение повторяется по горизонтали
• repeat-y или no-repeat repeat: изображение повторяется по вертикали
• no-repeat или no-repeat no-repeat: не повторять и показать изображение только один раз
• space или space space: изображение повторяется в обоих направлениях. Изображение максимально повторяется без обрезки. Первое и последнее изображения прикрепляются к любой стороне элемента, а расстояния между изображениями распределяются равномерно.Свойство background-position будет игнорироваться, пока одно целое изображение не может поместиться в контейнер. Единственный случай, когда изображение все-таки будет обрезано – когда его размеры больше размеров контейнера.
• round или round round: по мере увеличения размеров контейнера, для добавления еще одного изображения, повторяющиеся изображения будут растягиваться (не оставляя промежутков), пока оставшееся пространство не станет больше или равно половине ширины изображения. Когда добавляется следующее изображение, все существовавшие до него сжимаются, чтобы освободить ему место.

При использовании двухзначного написания, первое значение указывает поведение повторов по горизонтали, а второе – поведение по вертикали, так:

.element {
/* background-repeat: horizontal vertical */
   background-repeat: repeat space;
   background-repeat: repeat repeat;
   background-repeat: round space;
}

Пример имитации рамки для контейнера с изменяемыми размерами и фоновой картинкой:

Бесконечный бургер с применением background-repeat: round

See this code background-repeat infinite burger on x.xhtml.ru.