background-repeat

CSS-властивість background-repeat використовується для визначення, чи повторюється фонове зображення по горизонталі або вертикалі, чи воно має бути показано лише один раз. Ця властивість дозволяє створювати різноманітні ефекти з фонами, від простого повторення до більш складних фонів для створення патернів або текстур.

Інтерактивний приклад використання

Синтаксис

background-repeat: repeat | no-repeat | repeat-x | repeat-y | space | round;

Значення

  • repeat — фонове зображення буде повторюватися і по горизонталі, і по вертикалі, покриваючи весь елемент.
  • no-repeat — фонове зображення не повторюється, воно буде відображено тільки один раз.
  • repeat-x — фонове зображення буде повторюватися тільки по горизонталі (від лівого до правого краю елемента).
  • repeat-y — фонове зображення буде повторюватися тільки по вертикалі (від верхнього до нижнього краю елемента).
  • space — зображення буде повторюватися з автоматичними відступами між копіями, таким чином, щоб між зображеннями залишався рівномірний простір.
  • round — зображення буде повторюватися так, щоб вміститися в елементі, зменшуючи або збільшуючи його розмір для рівномірного покриття.

Крім цих основних значень, у будь-якої CSS-властивості є службові значення:

  • inherit — наслідує значення від батьківського елемента;
  • initial — скидає до значення за замовчуванням;
  • unset — поводиться як inherit для властивостей, що наслідуються, і як initial для ненаслідуваних;
  • revert — скасовує стилі автора і повертає значення з таблиці стилів браузера чи користувача;
  • revert-layer — повертає значення з попереднього шару каскаду (@layer).

Додаткові моменти

  • background-repeat дозволяє створювати ефекти повторення зображень, що може бути корисно для текстур або патернів, які повинні покривати фон елемента.
  • Використання значень space та round дозволяє краще контролювати розташування та розмір зображення при його повторенні.
  • Властивість background-repeat часто використовується у поєднанні з іншими властивостями фону, такими як background-image, background-position та background-size.
  • Якщо фонове зображення не вміщується в елемент, то no-repeat запобігає його повторенню, що допомагає уникнути перекриття зображення.
  • Властивість підтримується всіма сучасними браузерами.