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 කොටස,
පසුබිම සඳහා කෙටි කොටසක් ලෙස ක්‍රියා කරයි