background-position ගුණය

background-position ගුණය මඟින් මූලද්‍රව්‍යයක පසුබිම් රූපයේ ස්ථානය තීරණය කරයි. ස්ථානය තීරණය කිරීම සඳහා ඕනෑම ප්‍රමාණ සඳහා ඒකක භාවිතා කළ හැකිය. පළමු අගය වම්පසින් ඇති ඉඩස්ථානය නිරූපණය කරන අතර, දෙවන අගය ඉහළින් ඇති ඉඩස්ථානය නිරූපණය කරයි.

මූලික වචන භාවිතයෙන් ද ස්ථානය තීරණය කළ හැකිය. මෙම අවස්ථාවේ දී අගයන්ගේ අනුපිළිවෙල වැදගත් නොවේ. සිරස් සඳහා මූලික වචන: top, center, bottom. තිරස් සඳහා මූලික වචන: left, center, right.

මූලික වචන භාවිතා කරන ආකාරය

රූපයක් මූලික වචනයක් භාවිතයෙන් ස්ථානගත කිරීම සඳහා, සිරස් සඳහා එක් අගයක් සහ තිරස් සඳහා එක් අගයක් සඳහන් කළ යුතුය. උදාහරණයක් ලෙස, top right අගය සඳහන් කළහොත්, රූපය ඉහළ දකුණු කෙළවරේ දිස්වනු ඇත.

වචනවල අනුපිළිවෙල වැදගත් නොවේ: top right ලෙස ලිවිය හැකිය, නැතහොත් right top ලෙස ලිවිය හැකිය. center මූලික වචනයක් තිබේ නම් - එය අත්හැර දැමිය හැකිය. උදාහරණයක් ලෙස, top center යනු, top ලෙසම වේ. සහ center center යනු center ලෙසම වේ.

වාක්‍ය රචනය

තෝරන්නා {
	background-position: හිස් අවකාශයකින් වෙන් කරන ලද අගයන් දෙකක්;
}

උදාහරණය

පෙරනිමිය අනුව පසුබිම් රූපය ඉහළ වම් කෙළවරේ දිස්වනු ඇත:

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

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

උදාහරණය

පසුබිම් රූපය ඉහළ දකුණු කෙළවරට ස්ථානගත කරමු:

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

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

උදාහරණය

පසුබිම් රූපය පහළ දකුණු කෙළවරට ස්ථානගත කරමු:

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

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

උදාහරණය

පසුබිම් රූපය දකුණට සහ සිරස් මැදට ස්ථානගත කරමු:

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

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

උදාහරණය

පසුබිම් රූපය බ්ලොකයේ මැදට ස්ථානගත කරමු:

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

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

උදාහරණය

පසුබිම් රූපය වම්පසින් 20px දුරින් සහ ඉහළින් 40px දුරින් ස්ථානගත කරමු:

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

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

උදාහරණය

පසුබිම් රූපය වම්පසින් 90% දුරින් සහ ඉහළින් 100% දුරින් ස්ථානගත කරමු:

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

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

උදාහරණය

පසුබිම් රූපය වම්පසින් 30px දුරින් සහ සිරස් පහළට ස්ථානගත කරමු:

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

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

උදාහරණය

පසුබිම් රූපය වම්පසින් 30px දුරින් සහ සිරස් මැදට ස්ථානගත කරමු:

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

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

උදාහරණය

පසුබිම් රූපය ඉහළින් 30px දුරින් සහ තිරස් මැදට ස්ථානගත කරමු:

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

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

මෙයද බලන්න

background ගුණය,
පසුබිම සඳහා කෙටිකිරීමේ ගුණයක් ලෙස ක්‍රියා කරයි