<div class="box">

<p>Цей приклад показує як працює властивість <strong>background-repeat</strong>. Спробуйте ввімкнуити різні перемикачі, щоб змінити відображення фонового зображення на сторінці.</p>

<div class="inputs">
  <input id="repeat" checked name="background-repeat" type="radio"/>
  <label for="repeat">repeat</label>
  <message for="repeat">Фонове зображення повторюється по горизонталі і вертикалі.</message>
  
  <input id="repeat-x" name="background-repeat" type="radio"/>
  <label for="repeat-x">repeat-x</label>
  <message for="repeat-x">Фоновий малюнок повторюється тільки по горизонталі.</message>
  
  <input id="repeat-y" name="background-repeat" type="radio"/>
  <label for="repeat-y">repeat-y</label>
  <message for="repeat-y">Фоновий малюнок повторюється тільки по вертикалі.</message>
  
  <input id="no-repeat" name="background-repeat" type="radio"/>
  <label for="no-repeat">no-repeat</label>
  <message for="no-repeat">Встановлює фонове зображення в елементі без його повторень, положення якого визначається властивістю background-position.</message>
  
  <input id="space" name="background-repeat" type="radio"/>
  <label for="space">space</label>
  <message for="space">Зображення повторюється стільки раз, щоб повністю заповнити область; якщо це не вдається, між картинками додається порожній простір.</message>
  
  <input id="round" name="background-repeat" type="radio"/>
  <label for="round">round</label>
  <message for="round">Зображення повторюється так, щоб в області помістилося ціле число малюнків; якщо це не вдається зробити, то фонові малюнки масштабуються.</message>
</div>

<p id="message">Фонове зображення повторюється по горизонталі і вертикалі.</p>
  
</div>

* {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  background-image: url(https://lorempixel.com/100/100/);
  background-repeat: repeat;
  padding: 16px;
}

.box {
  padding: 16px;
  background-color: rgba(255,255,255,.95);
  outline: 6px solid #4f4f4f;
  margin-top: 15%;
}

message {
  display: none;
}

var $message = $('#message');

$('.inputs').find('input').on('change', function() {
  
  var $messageText = $("message[for='"+$(this).attr('id')+"']")
  $message.text($messageText.text());
  
  $('body').css('background-repeat', $(this).attr('id'));
  
});