Уласцівасць background-repeat

Уласцівасць background-repeat задае якім чынам паўтараць фонавую карцінку элемента. Па змаўчанні карцінка паўтараецца і па восі X, і па восі Y, такім чынам пакрываючы собой усю даступную вобласць.

Сінтаксіс

селектар {
	background-repeat: no-repeat | repeat | repeat-x | repeat-y | space | round;
}

Значэнні

Значэнне	Апісанне
`no-repeat`	Карцінка не будзе паўтарацца наогул.
`repeat-x`	Карцінка будзе паўтарацца па восі X.
`repeat-y`	Карцінка будзе паўтарацца па восі Y.
`repeat`	Карцінка будзе паўтарацца па восі X і па восі Y.
`space`	Карцінка паўторыцца столькі раз, каб цалкам запоўніць вобласць, калі гэта не ўдаецца, паміж карцінкамі дадаецца пустая прастора.
`round`	Карцінка паўторыцца так, каб у вобласці змясцілася цэлы лік малюнкаў, калі гэта не ўдаецца зрабіць, то фонавыя малюнкі маштабуюцца.

Значэнне па змаўчанні: repeat - пакрывае ўзором увесь экран.

Прыклад

Па змаўчанні фонавая карцінка замасціць собай увесь элемент:

<div id="elem"></div>

#elem {
	background-image: url("bg.png");
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Прыклад

Давайце зробім так, каб карцінка не паўтаралася:

<div id="elem"></div>

#elem {
	background-repeat: no-repeat;
	background-image: url("bg.png");
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Прыклад

А цяпер хай карцінка паўтараецца па восі X:

<div id="elem"></div>

#elem {
	background-repeat: repeat-x;
	background-image: url("bg.png");
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Прыклад

А цяпер па восі Y:

<div id="elem"></div>

#elem {
	background-repeat: repeat-y;
	background-image: url("bg.png");
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Прыклад

Карцінкі якія паўтараюцца па восях, можна пазіцыянаваць з дапамогай уласцівасці background-position:

<div id="elem"></div>

#elem {
	background-repeat: repeat-y;
	background-position: top center;
	background-image: url("bg.png");
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Прыклад

Паглядзім, як працуе значэнне space:

<div id="elem"></div>

#elem {
	background-repeat: space;
	background-image: url("bg.png");
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Прыклад

Паглядзім, як працуе значэнне round:

<div id="elem"></div>

#elem {
	background-repeat: round;
	background-image: url("bg.png");
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Глядзіце таксама

уласцівасць background,
якое з'яўляецца ўласцівасцю-скарачэннем для фону