تفاوت background attachment: fixed و scroll در CSS

در طراحی وب، کنترل رفتار تصاویر پس‌زمینه نقش مهمی در تجربه کاربری دارد. دو مقدار پرکاربرد برای ویژگی background-attachment در CSS شامل fixed و scroll می‌شوند که هرکدام رفتار متفاوتی را ایجاد می‌کنند. درک این تفاوت‌ها به شما کمک می‌کند تا طرح‌های دقیق‌تری پیاده‌سازی کنید.

ویژگی background-attachment تعیین می‌کند که تصویر پس‌زمینه نسبت به viewport (صفحه قابل مشاهده) یا عنصر والد خود چگونه حرکت کند. این تنظیمات به‌ویژه در صفحات با اسکرول طولانی مؤثر هستند.

کاربردهای عملی

هر یک از این مقادیر در سناریوهای خاصی مفید هستند:

موارد استفاده از scroll (پیش‌فرض): تصویر همراه با عنصر والد حرکت می‌کند. این گزینه برای بخش‌هایی که محتوای مستقل دارند مناسب است.
موارد استفاده از fixed: تصویر نسبت به viewport ثابت می‌ماند و هنگام اسکرول کردن حرکت نمی‌کند. این روش برای ایجاد افکت‌های پارالکس یا پس‌زمینه‌های ثابت کاربرد دارد.

نمونه کدهای مرتبط

در این بخش سه مثال عملی را بررسی می‌کنیم:

مثال ۱: استفاده از scroll (پیش‌فرض)

.section {
  background-image: url('pattern.png');
  background-attachment: scroll; /* قابل حذف (پیش‌فرض) */
  height: 1000px;
}

مثال ۲: استفاده از fixed

.hero {
  background-image: url('hero-bg.jpg');
  background-attachment: fixed;
  height: 100vh;
}

مثال ۳: ترکیب با سایر ویژگی‌ها

.parallax {
  background-image: url('layered-bg.jpg');
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

خلاصه درس

تمرین

مشاهده پاسخ

توسعه دهندگان

نیما جاهد