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 հատկությունը,
որը ֆոնի համար նախատեսված հատկության-հապավում է