Свойство CSS `background-repeat-y`

Свойство background-repeat-y CSS задаёт, как фоновые изображения повторяются или не повторяются вдоль вертикальной оси.

Свойства background-repeat-x и background-repeat-y также можно задать с помощью сокращённых свойств background-repeat или background.

Попробуйте

background-repeat-y: repeat;

background-repeat-y: space;

background-repeat-y: round;

background-repeat-y: no-repeat;

<section id="default-example">
  <div id="example-element"></div>
</section>

#example-element {
  background: #cccccc url("/shared-assets/images/examples/moon.jpg") center /
    120px;
  min-width: 100%;
  min-height: 100%;
}

Синтаксис

/* Keyword values */
background-repeat-y: repeat;
background-repeat-y: space;
background-repeat-y: round;
background-repeat-y: no-repeat;

/* Global values */
background-repeat-y: inherit;
background-repeat-y: initial;
background-repeat-y: revert;
background-repeat-y: revert-layer;
background-repeat-y: unset;

Для свойства background-repeat-y задаётся одно или несколько значений, разделённых запятыми.

Значения

repeat

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

no-repeat

Изображение не повторяется. Положение неповторяющегося фонового изображения задаётся свойством CSS background-position.

space

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

round

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

Описание

Свойство background-repeat-y принимает разделённый запятыми список ключевых слов из <repetition>, определяющих, как фоновые изображения должны повторяться по вертикали или не повторяться вовсе.

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

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

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

Например, если фоновое изображение имеет размер 100px x 100px, а высота области отрисовки фона составляет 1099px, изображение повторится 10 раз по вертикали, при этом высота каждого изображения будет растянута до 109.9px, что может изменить соотношение сторон изображения и исказить его. Если высота области отрисовки увеличится на 1px и составит 1100px, по вертикали поместится 11-е изображение, а каждое изображение будет отрисовано высотой 100px и больше не будет растягиваться по вертикали.

Формальное определение

Формальный синтаксис

Примеры

Настройка background-repeat-y

HTML

<ol>
  <li>
    no-repeat
    <div class="one"></div>
  </li>
  <li>
    repeat
    <div class="two"></div>
  </li>
  <li>
    space
    <div class="three"></div>
  </li>
  <li>
    round
    <div class="four"></div>
  </li>
</ol>

CSS

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-y: no-repeat;
}
.two {
  background-repeat-y: repeat;
}
.three {
  background-repeat-y: space;
}
.four {
  background-repeat-y: round;
}

@layer no-support {
  @supports not (background-repeat-y: repeat) {
    body::before {
      content: "Your browser doesn't support the `background-repeat-y` property.";
      background-color: wheat;
      display: block;
      text-align: center;
      padding: 1rem 0;
    }
  }
}

Результат

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

Спецификации

Совместимость с браузерами

См. также

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