مبدأ پس زمینه در CSS (Background Origin)
ویژگی «مبدأ پس زمینه (Background Origin)» تعیین می کند تصویر پس زمینه از کدام جعبه عنصر موقعیت گذاری شود. این جعبه می تواند padding-box، border-box یا content-box باشد.
ویژگی background-origin
این ویژگی محل آغاز تصویر پس زمینه را مشخص می کند و یکی از سه مقدار زیر را می پذیرد:
padding-box— شروع از گوشه بالا-چپ ناحیه padding (پیش فرض)border-box— شروع از گوشه بالا-چپ حاشیه (border)content-box— شروع از گوشه بالا-چپ ناحیه محتوا (content)
هشدار: اگر background-attachment برابر fixed باشد، background-origin اثری ندارد.
نمونه کد: مقایسه مقادیر
#div1 { border: 2px solid black; padding: 35px; background-image: url(img_flwr.gif); background-repeat: no-repeat; background-origin: padding-box; } #div2 { border: 2px solid black; padding: 35px; background-image: url(img_flwr.gif); background-repeat: no-repeat; background-origin: border-box; } #div3 { border: 2px solid black; padding: 35px; background-image: url(img_flwr.gif); background-repeat: no-repeat; background-origin: content-box; }نکته: برای مرور کلی، صفحه مبدأ پس زمینه را در نشانک ها نگه دارید و برای کنترل اندازه تصویر به اندازه پس زمینه مراجعه کنید.
ویژگی های مرتبط
برای تعیین ناحیه نقاشیِ پس زمینه از برش پس زمینه (background-clip) استفاده کنید. همچنین ترکیب چند تصویر پس زمینه در پس زمینه چندگانه توضیح داده شده است. برای جزئیات مرجع، به مستندات background-origin در MDN و نیز background-attachment در MDN سر بزنید.