پیوست پس زمینه (Background Attachment)
«پیوست پس زمینه (Background Attachment)» یعنی تصویر پس زمینه همراه اسکرول حرکت کند یا ثابت بماند. ساده بگویم: هنگام پایین رفتن صفحه، عکس تکان بخورد یا نه.
تعریف ویژگی background-attachment
ویژگی background-attachment مشخص می کند پس زمینه ثابت باشد یا با محتوا اسکرول شود. مقدارهای مهم: fixed و scroll.
حالت ثابت (fixed)
در حالت fixed، تصویر پس زمینه جا به جا نمی شود. متن حرکت می کند، تصویر می ماند.
<style>
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
</style>
حالت اسکرول (scroll)
در حالت scroll، تصویر همراه محتوا حرکت می کند. این حالت شبیه کاغذ دیواری متحرک است.
<style>
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: scroll;
}
</style>
گام های عملی
- یک تصویر سبک برای پس زمینه انتخاب کن.
- با
background-attachmentبینfixedوscrollتصمیم بگیر. - با
background-positionمحل تصویر را دقیق کن.
نکته: تصاویر خیلی سنگین باعث لگ می شوند. اندازه و فشرده سازی را جدی بگیر.
مطالب مرتبط: تکرار پس زمینه برای کنترل تکرار، و تصویر پس زمینه برای تنظیم منبع تصویر. همچنین میان بُرها را در پس زمینه خلاصه ببین.
جمع بندی سریع
fixed: تصویر ثابت می ماند.scroll: تصویر با صفحه حرکت می کند.- مکان را با
background-positionتنظیم کن. - برای کارایی بهتر، تصویر را سبک نگه دار.