استفاده از واحد «درصد» مقابل background-position در CSS

دستور background-position وظیفه دارد تا محل شروع برای تصویر پس‌زمینه‌ی یک عنصر را تغییر دهد. در هنگام طراحی یک سایت واکنش‌گرا یا Responsive با استفاده از تعیین مکان «درصدی» تصویر می‌توان یک پس‌زمینه‌ی Responsive در اختیار داشت. با این حال برای استفاده‌ی صحیح از واحد «درصد» لازم است تا با شیوه‌ی خاص عملکرد آن آشنایی داشته باشیم.

برای شروع به مثال مقابل توجه کنید:

div {
	background-image: url( "amib.jpg" );
	background-repeat: no-repeat;
	background-size: 200%;
	width: 50%;
	background-position: 50% 0;
}

قطعه کد بالا، عنصر را به‌اندازه‌ی «50%» عرض صفحه کوچک می‌کند، تصویر «amib.jpg» را به اندازه‌ی «200%» فضای عنصر یا «100%» عرض صفحه تغییر اندازه می‌دهد، نقطه‌ی «50%» تصویر را پیدا می‌کند و آن را طوری جابجا می‌کند که این نقطه بر نقطه‌ی «50%» عنصر «div» یک‌جا قرار بگیرند.
با این شرح، مقدار «0%» تصویر را در منتها الیه سمت چپ عنصر و «100%» آن را در منتها الیه سمت راست عنصر قرار خواهند داد.

حال اگر بخواهیم در مورد مثال بالا، عنصر div را در محلی غیر از ابتدا، انتها یا میانه‌ی تصویر قرار دهیم، لازم است تا درصد جابجایی تصویر را به صورت دقیق مشخص کنیم. برای مثال اگر بخواهیم سمت چپ عنصر در محل ۴۰ درصدی عرض صفحه و همچنین تصویر قرار بگیرد محاسبات به این صورت خواهند بود:

div.s1 {
	/*
	100x - 50x = 40
	50x = 40
	x = 40 / 50
	x = 0.8
	*/
	left: 40%;
	background-position: 80% 0;
}
 
div.s2 {
	/*
	100x - 50x = 33.333
	50x = 33.333
	x = 33.333 / 50
	x = 0.66666
	*/
	left: 33.333%;
	background-position: 66.666% 0;
}