Хосияти 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,
ки хосияти ихтисорёфта барои замина мебошад