خاصیت background-attachment در CSS
در طراحی وب، کنترل رفتار تصاویر پس‌زمینه یکی از جنبه‌های مهم برای ایجاد تجربه کاربری جذاب است. خاصیت background-attachment در CSS به شما امکان می‌دهد تعیین کنید که تصویر پس‌زمینه نسبت به viewport ثابت بماند یا همراه با محتوا اسکرول شود.
مقادیر ممکن برای background-attachment
| مقدار |
توضیحات |
| scroll |
(پیش‌فرض) تصویر همراه با عنصر اسکرول می‌شود |
| fixed |
تصویر نسبت به viewport ثابت می‌ماند |
| local |
تصویر نسبت به محتوای عنصر ثابت می‌ماند |
مقدار fixed در دستگاه‌های موبایل ممکن است به درستی کار نکند و بهتر است با احتیاط استفاده شود.
کاربردهای عملی
این خاصیت در موارد زیر بسیار مفید است:
- ایجاد افکت پارالاکس در صفحات وب
- طراحی هدرهای ثابت با تصاویر پس‌زمینه جذاب
- بهبود خوانایی متن روی تصاویر پس‌زمینه
- ایجاد جداول یا لیست‌های با پس‌زمینه متمایز
مثال کد:
body {
background-image: url('bg.jpg');
background-attachment: fixed;
background-size: cover;
}
برای درک بهتر این خاصیت، می‌توانید از مثال‌های عملی در اطلاعات بیشتر استفاده کنید.
ملاحظات فنی
- مقدار fixed ممکن است بر عملکرد صفحه تأثیر بگذارد
- در دستگاه‌های لمسی ممکن است رفتار متفاوتی داشته باشد
- ترکیب با background-size برای نتیجه مطلوب ضروری است
برای دستیابی به بهترین نتیجه، همیشه خاصیت background-attachment را همراه با سایر خاصیت‌های پس‌زمینه مانند background-position و background-repeat آزمایش کنید.
