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

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

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

Попробуйте

background-repeat-x: repeat;

background-repeat-x: space;

background-repeat-x: round;

background-repeat-x: no-repeat;

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

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

Синтаксис

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

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

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

Значения

repeat

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

no-repeat

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

space

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

round

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

Описание

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

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

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

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

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

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

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

Примеры

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

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

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

Результат

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

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

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

См. также

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