Свойство 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>

Читайте также

Обсуждение (0)

Войдите или зарегистрируйтесь для того чтобы оставлять комментарии