background-origin ගුණය

background-origin ගුණය මගින් අංගයකට සාපේක්ෂව පසුබිම් පින්තූරය (පින්තූරය පමණක්, පිරවුම නොවේ) ස්ථානගත වන ආකාරය නිර්වචනය කරයි: පසුබිම් පින්තූරයේ කොටසක් දාරය යටට ගමන් කරයි, පසුබිම දාරය යටට ගමන් නොකරයි නැතිනම් පසුබිම අංගයේ අන්තර්ගතයට ඉහලින් පමණක් ස්ථානගත වේ (එනම් padding පසුබිම ඉවතට තල්ලු කරයි).

වාක්‍ය රචනා ක්‍රමය

තේරුම් ගන්නා {
	background-origin: padding-box | border-box | content-box;
}

අගයන්

අගය	විස්තරය
`border-box`	පසුබිම් පින්තූරය දාරය යටට ගමන් කරයි.
`padding-box`	පසුබිම් පින්තූරය දාරය යටට ගමන් නොකරයි.
`content-box`	පසුබිම් පින්තූරය අන්තර්ගතයට ඉහලින් පමණක් වේ.

පෙරනිමි අගය: padding-box.

සටහන්

background-origin ගුණය ක්‍රියාත්මක නොවේ, background-attachment ගේ අගය fixed වන විට. එසේම background-repeat ගේ අගය repeat වන විට background-origin ගුණය සැමවිටම border-box අගයෙන් යුතුව ක්‍රියාත්මක වේ.

උදාහරණය . පෙරනිමිය අනුව

පෙරනිමිය අනුව පසුබිම දාරය යටට ගමන් නොකරයි:

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

#elem {
	background-image: url("bg.png");
	background-repeat: no-repeat;
	border: 10px dashed black;
	padding: 30px;
	width: 250px;
	height: 150px;
}

උදාහරණය . border-box අගය

දැන් පසුබිම දාරය යටට ගමන් කරයි:

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

#elem {
	background-origin: border-box;
	background-image: url("bg.png");
	border: 10px dashed black;
	padding: 30px;
	width: 250px;
	height: 150px;
}

උදාහරණය . content-box අගය

දැන් පසුබිම padding මගින් ඉවතට තල්ලු වේ:

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

#elem {
	background-origin: content-box;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	border: 10px dashed black;
	padding: 30px;
	width: 250px;
	height: 150px;
}

උදාහරණය . background-repeat: repeat විට

background-repeat ගේ අගය repeat වන විට background-origin ගුණය සැමවිටම ක්‍රියාත්මක වේ, border-box අගයෙන් යුතුව, එනම් පසුබිම සැමවිටම දාරය යටට ගමන් කරයි:

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

#elem {
	background-repeat: repeat;
	background-image: url("bg.png");
	border: 10px dashed black;
	padding: 30px;
	width: 350px;
	height: 300px;
}

මෙයද බලන්න

background-clip ගුණය,
පසුබිම් පින්තූරයේ සහ පිරවුමේ පිහිටුම නිර්වචනය කරයි
background ගුණය,
පසුබිම සඳහා සංක්ෂිප්ත ගුණයක් වේ