شرح خاصية Background Attachment في CSS مع أمثلة عملية

🎯 التحكم في سلوك الخلفية: دليل شامل لـ background-attachment في CSS

هل لاحظت يومًا كيف تتحرك الصور الخلفية في بعض المواقع عند التمرير؟ بعضها يبقى ثابتًا والبعض الآخر يتحرك مع الصفحة! هذا بالضبط ما تتحكم فيه خاصية background-attachment الرائعة في CSS.

📚 ما هي خاصية background-attachment؟

background-attachment هي خاصية CSS تحدد كيفية ارتباط صورة الخلفية بعنصرها. بمعنى آخر، تتحكم في ما إذا كانت الصورة الخلفية ستثبت في مكانها أم ستتحرك عند التمرير في الصفحة.

.element {
    background-image: url('image.jpg');
    background-attachment: scroll; /* القيمة الافتراضية */
}

🎮 قيم خاصية background-attachment

هناك ثلاث قيم رئيسية يمكنك استخدامها مع هذه الخاصية، كل منها يعطي سلوكًا مختلفًا للخلفية:

1. scroll (التمرير) - القيمة الافتراضية

• الصورة الخلفية تتحرك مع عنصرها عند التمرير
• إذا كان العنصر له شريط تمرير خاص، تتحرك الصورة معه
• السلوك الطبيعي والمألوف لمعظمة الخلفيات

.box {
    background-image: url('pattern.png');
    background-attachment: scroll; /* تتحرك مع العنصر */
    height: 500px;
    overflow: auto;
}

2. fixed (ثابت)

• الصورة الخلفية تثبت في مكانها بالنسبة لإطار العرض (viewport)
• لا تتحرك الصورة أبدًا، حتى عند التمرير لأسفل أو أعلى الصفحة
• مثالي لإنشاء تأثيرات بصرية مذهلة

.hero-section {
    background-image: url('hero-bg.jpg');
    background-attachment: fixed; /* تثبت في مكانها */
    background-size: cover;
    height: 100vh;
}

3. local (محلي)

• الصورة تتحرك مع محتوى العنصر عند التمرير
• إذا كان العنصر له محتوى أطول من ارتفاعه، تتحرك الصورة مع هذا المحتوى
• مفيدة للعناصر التي تحتوي على نصوص أو محتوى طويل

.scrollable-content {
    background-image: url('texture.jpg');
    background-attachment: local; /* تتحرك مع المحتوى */
    height: 300px;
    overflow: auto;
}

🛠️ أمثلة عملية وتطبيقات

لنرى كيف تعمل هذه القيم في الممارسة العملية:

مثال 1: قسم بطولي (Hero Section) بخلفية ثابتة

<div class="hero">
    <h1>مرحباً بكم في موقعنا</h1>
</div>

.hero {
    background-image: url('mountains.jpg');
    background-attachment: fixed;
    background-size: cover;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

مثال 2: صندوق بمحتوى قابل للتمرير

<div class="scroll-box">
    <p>هذا محتوى طويل جداً...</p>
    <p>يستمر لعدة أسطر...</p>
    <!-- محتوى إضافي -->
</div>

.scroll-box {
    background-image: url('paper-texture.jpg');
    background-attachment: local;
    height: 200px;
    overflow-y: scroll;
    padding: 20px;
}

💡 نصائح مهمة للاستخدام

1. تحسين الأداء: القيمة fixed قد تؤثر على أداء الصفحة في الأجهزة الضعيفة
2. التوافق مع الهواتف: بعض الأجهزة المحمولة لا تدعم fixed بشكل كامل
3. الاختبار دائماً: جرب الخلفية على أجهزة وشاشات مختلفة
4. استخدم مع background-size: غالباً ما تحتاج لضبط حجم الخلفية مع background-attachment

/* مثال متكامل */
.section {
    background-image: url('background.jpg');
    background-attachment: fixed;
    background-size: cover; /* تغطية كاملة للمساحة */
    background-position: center; /* توسيط الصورة */
    background-repeat: no-repeat; /* منع التكرار */
}