background-repeat

Это свойство принимает два <repeat-style> ключевых слова или одно ключевое слово в качестве сокращения для двух значений. Если заданы два значения, первое определяет поведение горизонтального повторения, а второе — вертикального. Значения свойства могут использоваться для повторения только по горизонтали, только по вертикали или вообще без повторения.

Значение по умолчанию — repeat repeat. В этом случае фоновое изображение сохраняет своё собственное соотношение сторон, повторяясь по горизонтали и вертикали, чтобы покрыть всю область отрисовки фона, а крайние изображения обрезаются до размера элемента. Какие именно края обрезаются, зависит от значения свойства background-position. Сколько раз они повторяются и насколько сильно обрезаются изображения на краях, зависит от размера области отрисовки фона и background-size.

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

В качестве альтернативы, повторяемое фоновое изображение можно растянуть, чтобы оно покрыло всю область без обрезки. С помощью round, повторяемое изображение растягивается для заполнения всего доступного места, пока не появится место для добавления дополнительного повторяемого изображения, если соотношение сторон фонового изображения не совпадает с соотношением сторон области отрисовки. Например, если фоновое изображение имеет размеры 100px × 100px, а область отрисовки фона — 1099px × 750px, изображение будет повторено 10 раз по горизонтали и 7 раз по вертикали, для общего количества повторений 70. При этом каждое изображение будет растянуто до размеров 109,9px × 105px. Если ширина области отрисовки увеличится на 1 пиксель, став 1100 пикселей, то дополнительно поместится 11-е изображение по горизонтали, и общее количество повторений составит 77. При этом каждое изображение будет нарисованы размером 100px в ширину и 105px в высоту, растянутые только по вертикали.

Это свойство принимает до двух <repeat-style> ключевых слов. Первое значение — горизонтальное повторение. Второе значение — вертикальное поведение. Если задано только одно значение, отличное от repeat-x или repeat-y, это значение применяется к обеим осям. Доступные значения включают:

repeat

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

no-repeat

Изображение не повторяется (и, следовательно, область отрисовки фонового изображения не обязательно будет полностью покрыта). Позиция неповторяемого фонового изображения определяется свойством CSS background-position.

space

Изображение повторяется по возможности без обрезки. Первое и последнее изображения закрепляются по бокам элемента, а пробелы равномерно распределяются между изображениями. Свойство background-position игнорируется, если одно изображение можно отобразить без обрезки. Единственный случай, когда происходит обрезка при использовании space, — это когда нет места для отображения хотя бы одного изображения.

round

По мере увеличения доступного места повторяющиеся изображения будут растягиваться (без промежутков) до тех пор, пока не появится место для добавления следующего. Это единственное <repeat-style> значение, которое может привести к искажению соотношения сторон фонового изображения соотношение сторон, что произойдёт, если соотношение сторон фонового изображения отличается от соотношения сторон области отрисовки.

repeat-x

Сокращение для repeat no-repeat, фоновое изображение повторяется только по горизонтали, с обрезкой крайнего изображения, если ширина области отрисовки не кратна ширине фонового изображения.

repeat-y

Сокращение для no-repeat repeat, фоновое изображение повторяется только по вертикали, с обрезкой крайнего изображения, если высота области отрисовки не кратна высоте фонового изображения.

Если предоставлено одно <repeat-style> ключевое слово, оно является сокращением для следующего синтаксиса с двумя значениями:

background-repeat = 
  <repeat-style>#  

<repeat-style> = 
  repeat-x                                     |
  repeat-y                                     |
  [ repeat | space | round | no-repeat ]{1,2}  

HTML

<ol>
  <li>
    no-repeat
    <div class="one"></div>
  </li>
  <li>
    repeat
    <div class="two"></div>
  </li>
  <li>
    repeat-x
    <div class="three"></div>
  </li>
  <li>
    repeat-y
    <div class="four"></div>
  </li>
  <li>
    space
    <div class="five"></div>
  </li>
  <li>
    round
    <div class="six"></div>
  </li>
  <li>
    repeat-x, repeat-y (multiple images)
    <div class="seven"></div>
  </li>
</ol>

CSS

/* Shared for all DIVS in example */
ol,
li {
  margin: 0;
  padding: 0;
}
li {
  margin-bottom: 12px;
}
div {
  background-image: url(star-solid.gif);
  width: 160px;
  height: 70px;
}

/* Background repeats */
.one {
  background-repeat: no-repeat;
}
.two {
  background-repeat: repeat;
}
.three {
  background-repeat: repeat-x;
}
.four {
  background-repeat: repeat-y;
}
.five {
  background-repeat: space;
}
.six {
  background-repeat: round;
}

/* Multiple images */
.seven {
  background-image: url(star-solid.gif), url(favicon32.png);
  background-repeat: repeat-x, repeat-y;
  height: 144px;
}

Результат

В этом примере каждый элемент списка сопоставлен с различным значением background-repeat.

• Другие сокращения компонентов background: background-attachment, background-clip, background-color, background-image, background-origin, background-position (background-position-x и background-position-y), и background-size
• Использование нескольких фонов
• Модуль CSS фоны и границы
• Понимание соотношений сторон