<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'));
});
This Pen doesn't use any external CSS resources.