پیوست پس زمینه در CSS

در این صفحه با «پیوست پس زمینه (Background Attachment)» آشنا می شوید. این ویژگی تعیین می کند تصویر پس زمینه همراه محتوا اسکرول شود یا ثابت بماند. سپس نمونه های ثابت و اسکرولی را می بینید.

تعریف ویژگی background-attachment

ویژگی background-attachment مشخص می کند تصویر پس زمینه ثابت باشد یا با بقیه صفحه حرکت کند. برای آشنایی مقدماتی به پس زمینه مراجعه کنید.

body {  background-image: url("img_tree.png");  background-repeat: no-repeat;  background-position: right top;  background-attachment: fixed;}

نکته: «پیوست پس زمینه» در کنار تکرار تصویر پس زمینه و تصویر پس زمینه کنترل بصری کامل تری می دهد.

پیوست ثابت: fixed

با مقدار fixed تصویر پس زمینه ثابت می ماند و با اسکرول جابه جا نمی شود. این حالت برای جلوه پارالاکس ساده مفید است.

body {  background-image: url("img_tree.png");  background-repeat: no-repeat;  background-position: right top;  background-attachment: fixed;}

پیوست اسکرولی: scroll

با مقدار scroll تصویر همراه محتوا حرکت می کند. این رفتار در بیشتر مرورگرها حالت پیش فرض است.

body {  background-image: url("img_tree.png");  background-repeat: no-repeat;  background-position: right top;  background-attachment: scroll;}

پیشنهادهای کاربردی برای پیوست پس زمینه

هشدار: در دستگاه های موبایل، رفتار fixed ممکن است متفاوت باشد و مصرف حافظه گرافیکی را افزایش دهد.

نکته: برای تنظیم سریع تر می توانید از پس زمینه خلاصه استفاده کنید و مقدار پیوست را در همان اعلان بنویسید.

برای جزئیات بیش تر درباره background-attachment و تعامل آن با background-position به مستندات MDN سر بزنید.