Background-repeat xassəsi

background-repeat xassəsi elementin fon şəklinin necə təkrarlanacağını təyin edir. Əslanda şəkil həm X oxu, həm də Y oxu üzrə təkrarlanır, beləliklə bütün əlçatan sahəni örtür.

Sintaksis

selektor {
	background-repeat: no-repeat | repeat | repeat-x | repeat-y | space | round;
}

Dəyərlər

Dəyər	Təsvir
`no-repeat`	Şəkil ümumiyyətlə təkrarlanmayacaq.
`repeat-x`	Şəkil X oxu üzrə təkrarlanacaq.
`repeat-y`	Şəkil Y oxu üzrə təkrarlanacaq.
`repeat`	Şəkil həm X oxu, həm də Y oxu üzrə təkrarlanacaq.
`space`	Şəkil sahəni tam doldurmaq üçün lazım olan qədər təkrarlanacaq, əgər bu mümkün deyilsə, şəkillər arasında boşluq əlavə olunur.
`round`	Şəkil elə təkrarlanacaq ki, sahədə tam sayda şəkil yerləşsin, əgər bu mümkün deyilsə, fon şəkilləri miqyaslanır.

Standart dəyər: repeat - bütün ekranı naxışla örtür.

Nümunə

Əslanda fon şəkli bütün elementi örtəcək:

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

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

Nümunə

Gəlin şəklin təkrarlanmamasını təmin edək:

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

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

Nümunə

İndi isə şəklin X oxu üzrə təkrarlanmasını edək:

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

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

Nümunə

İndi isə Y oxu üzrə:

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

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

Nümunə

Oxlar üzrə təkrarlanan şəkilləri background-position xassəsi ilə yerləşdirmək olar:

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

Nümunə

Gəlin space dəyərinin necə işlədiyinə baxaq:

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

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

Nümunə

Gəlin round dəyərinin necə işlədiyinə baxaq:

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

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

Həmçinin bax

fon üçün qısa xassə olan background xassəsi