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