background-size සම්පත

background-size සම්පත පසුබිම් රූපයේ ප්‍රමාණය නියම කරයි. සම්පතේ අගය විය හැක්කේ ඕනෑම ප්‍රමාණ ඒකක, නැතහොත් auto, cover හෝ contain යන මූලික වචන වේ.

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

තෝරන්නා {
	background-size: අගය;
}

මූලික වචන

අගය	විස්තරය
`auto`	පසුබිමට ස්වාභාවික ප්‍රමාණය, එනම් පසුබිම් රූපයේ තාත්වික ප්‍රමාණයම ලැබේ. `auto` අගය එක් පැත්තකට පමණක් දෙනු ලැබුවහොත්, එම පැත්තේ දී පසුබිම විකෘති නොවූ අනුපාත පවත්වා ගනිමින් පරිමාණ කෙරේ.
`cover`	රූපය එහි අනුපාත පවත්වා ගනිමින්, බ්ලොක් කුඩාස සම්පූර්ණයෙන්ම ආවරණය කරන පරිදි පරිමාණ කරයි. රූපය සම්පූර්ණයෙන් ගැලපීමට උත්සාහ කරයි, නමුත් එය සැමවිටම සාර්ථක නොවන බැවින් එහි යම් කොටසක් කපා හැරේ. බ්ලොක් කුඩාස සැමවිටම සම්පූර්ණයෙන්ම රූපයෙන් ආවරණය වේ.
`contain`	රූපය එහි අනුපාත පවත්වා ගනිමින්, බ්ලොක් කුඩාස තුළ සම්පූර්ණයෙන්ම ගැලපෙන පරිදි පරිමාණ කරයි. මෙහිදී එය සම්පූර්ණ පළල හෝ සම්පූර්ණ උස (රූපයේ අනුපාත සහ මූලද්‍රව්‍යයේ ප්‍රමාණයන් මත රඳා පවතී) අල්ලා ගනී. සාමාන්‍යයෙන් බ්ලොක් කුඩාස සම්පූර්ණයෙන් රූපයෙන් ආවරණය නොවේ (නමුත් රූපය සැමවිටම සම්පූර්ණයෙන් දෘශ්‍යමාන වේ, කුඩා කරන ලද ආකාරයෙන් වුවද).

පෙරනිමි අගය: auto.

භාවිතය

ප්‍රමාණ ඒකක සහ auto විවිධ සංයෝජන වලින් භාවිතා කළ හැකිය, උදාහරණයක් ලෙස: auto 20px, හෝ 30% 20px, හෝ auto 30% යනාදිය. මෙම අවස්ථාවේ දී, පළමු පරාමිතිය පසුබිමේ පළල නියම කරන අතර, දෙවන පරාමිතිය පසුබිමේ උස නියම කරයි. එක් පරාමිතියක් පමණක් දක්වා ඇත්නම් - එය පසුබිමේ පළල සහ උස යන දෙකම එකවර නියම කරයි.

උදාහරණය

දැන් පසුබිම් රූපයට එහි ස්වාභාවික ප්‍රමාණයම ලැබේ:

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

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

උදාහරණය

දැන් පසුබිම් රූපයේ ප්‍රමාණය වනු ඇත 300px ක් 400px ක් (අපගේ නඩුවේ දී රූපයේ අනුපාත විකෘති වේ):

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

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

උදාහරණය

දැන් පසුබිම් රූපයේ ප්‍රමාණය වනු ඇත 400px ක් 400px ක් (අපගේ නඩුවේ දී රූපයේ අනුපාත විකෘති වේ):

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

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

උදාහරණය

දැන් පසුබිම් රූපයේ තිරස් ප්‍රමාණය වනු ඇත 400px, සහ සිරස් ප්‍රමාණය අනුපාත විකෘති නොවන පරිදි වෙනස් වේ:

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

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

උදාහරණය

දැන් පසුබිම් රූපයේ සිරස් ප්‍රමාණය වනු ඇත 400px, සහ තිරස් ප්‍රමාණය අනුපාත විකෘති නොවන පරිදි වෙනස් වේ:

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

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

උදාහරණය . contain අගය

contain අගයේ ක්‍රියාකාරිත්වය නරඹන්න:

<div id="elem1" class="elem"></div>
<div id="elem2" class="elem"></div>
<div id="elem3" class="elem"></div>
<div id="elem4" class="elem"></div>
<div id="elem5" class="elem"></div>
<div id="elem6" class="elem"></div>

.elem {
	background-size: contain;
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	margin-bottom: 20px;
}

#elem1 {
	width: 600px;
	height: 500px;
}

#elem2 {
	width: 500px;
	height: 600px;
}

#elem3 {
	width: 400px;
	height: 400px;
}

#elem4 {
	width: 300px;
	height: 400px;
}

#elem5 {
	width: 200px;
	height: 400px;
}

#elem6 {
	width: 300px;
	height: 100px;
}

උදාහරණය . cover අගය

cover අගයේ ක්‍රියාකාරිත්වය නරඹන්න:

<div id="elem1" class="elem"></div>
<div id="elem2" class="elem"></div>
<div id="elem3" class="elem"></div>
<div id="elem4" class="elem"></div>
<div id="elem5" class="elem"></div>
<div id="elem6" class="elem"></div>

.elem {
	background-size: cover;
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	margin-bottom: 20px;
}

#elem1 {
	width: 600px;
	height: 500px;
}

#elem2 {
	width: 500px;
	height: 600px;
}

#elem3 {
	width: 400px;
	height: 400px;
}

#elem4 {
	width: 300px;
	height: 400px;
}

#elem5 {
	width: 200px;
	height: 400px;
}

#elem6 {
	width: 300px;
	height: 100px;
}

උදාහරණය . cover හි ක්‍රියාකාරිත්වය වැඩි දියුණු කිරීම

cover අගයේ ක්‍රියාකාරිත්වය වැඩි දියුණු කළ හැකිය, background-position සම්පත භාවිතයෙන් රූපය මධ්‍යගත කිරීමෙන් (අපගේ නඩුවේ දී, දෘශ්‍යමාන කොටස් වලට අශ්වයන්ගේ හිස් පැමිණෙන අතර, ඔවුන්ගේ පසුපස කොටස් නොවේ):

<div id="elem1" class="elem"></div>
<div id="elem2" class="elem"></div>
<div id="elem3" class="elem"></div>
<div id="elem4" class="elem"></div>
<div id="elem5" class="elem"></div>
<div id="elem6" class="elem"></div>

.elem {
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	margin-bottom: 20px;
}

#elem1 {
	width: 600px;
	height: 500px;
}

#elem2 {
	width: 500px;
	height: 600px;
}

#elem3 {
	width: 400px;
	height: 400px;
}

#elem4 {
	width: 300px;
	height: 400px;
}

#elem5 {
	width: 200px;
	height: 400px;
}

#elem6 {
	width: 300px;
	height: 100px;
}

මේවාත් බලන්න

background සම්පත,
පසුබිම සඳහා කෙටි සම්පතක් ලෙස ක්‍රියා කරයි