Свойство background-repeat
Задает повтор фонового изображения элемента
background-repeat: no-repeat;Пошаговый план! Как быстро научиться создавать сайты!
Chrome
Все
Edge
Все
FireFox
Все
IE
6+
iOS Safari
Все
Opera
Все
Safari
Все
Значения
background-repeat: no-repeat;
Отменяет повтор фона
<style>
.example-1 {
height: 200px;
background-color: #0088f0;
background-image: url(http://www.transparenttextures.com/patterns/3px-tile.png);
background-repeat: no-repeat;
}
</style>
<div class="example-1"></div>background-repeat: repeat-x;
Повтор фона по оси X
<style>
.example-2 {
height: 200px;
background-color: #0088f0;
background-image: url(http://www.transparenttextures.com/patterns/3px-tile.png);
background-repeat: repeat-x;
}
</style>
<div class="example-2"></div>background-repeat: repeat-y;
Повтор фона по оси Y
<style>
.example-3 {
height: 200px;
background-color: #0088f0;
background-image: url(http://www.transparenttextures.com/patterns/3px-tile.png);
background-repeat: repeat-y;
}
</style>
<div class="example-3"></div>background-repeat: repeat;
Повтор фона по оси X и Y
<style>
.example-4 {
height: 200px;
background-color: #0088f0;
background-image: url(http://www.transparenttextures.com/patterns/3px-tile.png);
background-repeat: repeat;
}
</style>
<div class="example-4"></div>