CSS background-repeat — повтор фонового зображення

HTML

<div class="box">repeat (типово)</div>
<div class="box once">no-repeat</div>

CSS

.box {
    height: 90px;
    margin-bottom: 8px;
    border: 1px solid #999;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Ccircle cx='13' cy='13' r='12' fill='%230172ad'/%3E%3C/svg%3E");
}

.once {
    background-repeat: no-repeat;
}

HTML

<h4>Властивість <code>background-repeat</code></h4>

<div class="demo">
	<div class="block no"><p>фонове зображення без повторення</p></div>
	<div class="block yes"><p> фонове зображення з повторенням</p></div>
</div>

CSS

* {
	box-sizing: border-box;
}
	
body {
	font-family: sans-serif;
	line-height: 1.45;
	font-size: 18px;
	padding: 16px 16px 0 16px;
	text-align: center;
}

h4 {
	color: #4f4f4f;
	font-weight: 400;
}

.demo {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.block {
	margin-top: 75px;
	width: 45vw;
	height: 150px;
	border: 8px solid #4f4f4f;
	font-family: monospace;
	font-size: .8em;
	color: #000;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E");
}

.no { background-repeat: no-repeat; }
.yes { background-repeat: repeat; }

.block > p {
	position: relative;
	top: -75px;
}

HTML

<div class="tile space">background-repeat: space</div>
<div class="tile round">background-repeat: round</div>

CSS

.tile {
    height: 130px;
    padding: 4px;
    margin-bottom: 10px;
    border: 1px solid #999;
    font: 13px sans-serif;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Crect x='2' y='2' width='56' height='56' rx='10' fill='%230172ad'/%3E%3C/svg%3E");
    background-size: 60px 60px;
}

.space {
    background-repeat: space;
}

.round {
    background-repeat: round;
}

HTML

<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>

CSS

* {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E");
  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;
}

JS

const message = document.querySelector('#message');

document.querySelectorAll('.inputs input').forEach((el) => el.addEventListener('change', function () {

  var messageText = document.querySelector("message[for='" + this.id + "']");
  message.textContent = messageText?.textContent ?? '';

  document.querySelectorAll('body').forEach((n) => n.style.setProperty('background-repeat', this.id));

}));

HTML

<h4>background-repeat: repeat; </h4>
  <div class="repeat"></div>

  <h4>background-repeat: repeat-x;</h4>
  <div class="repeat-x"></div>

  <h4>background-repeat: repeat-y;</h4>
  <div class="repeat-y"></div>

  <h4>background-repeat: no-repeat;</h4>
  <div class="no-repeat"></div>

  <h4>background-repeat: space;</h4>
  <div class="space"></div>

  <h4>background-repeat: round;</h4>
  <div class="round"></div>

CSS

div {
  width: 500px;
  height: 150px;
  border: 3px solid #808080;
  margin-bottom: 40px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E");
  background-size: 45px 45px;
}

.repeat { background-repeat: repeat; }

.no-repeat { background-repeat: no-repeat; }

.repeat-x { background-repeat: repeat-x; }

.repeat-y { background-repeat: repeat-y; }

.space { background-repeat: space; }

.round { background-repeat: round; }