خاصية تثبيت الخلفية
آخر تحديث: 2026-09-13
background-attachment خاصية تثبيت الخلفية
تحدد الخاصية background-attachment ما إذا كانت صورة الخلفية تمرر مع الصفحة أم لا. القيمة الافتراضية scroll تعني أن الخلفية تمرر مع محتوى العنصر؛ أما fixed فتثبّت الخلفية في إطار العرض (viewport) مما يولّد تأثيرًا متوازيًا (parallax)؛ وlocal تجعل الخلفية تمرر مع المحتوى الداخلي للعنصر. تُستخدم غالبًا لتأثيرات بصرية.
| الفئة | |
|---|---|
| القيمة الأولية | scroll |
| موروث | لا |
| ينطبق على | all |
| نوع الحركة | discrete |
| إصدار CSS | CSS1 |
| الحالة | قياسي |
📝 التركيب
background-attachment: scroll | fixed | local;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
scroll | fixed | local | كلمة مفتاحية | سلوك تمرير الخلفية |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| background-attachment | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： تثبّت القيمة fixed الخلفية في إطار العرض، وتُستخدم عادةً لإنشاء تأثيرات تمرير متوازية (parallax).
تحذير： يؤدي background-attachment: fixed أداءً ضعيفًا على الأجهزة المحمولة، وتتجاهل بعض متصفحات الجوال هذه القيمة تمامًا.
❓ الأسئلة الشائعة
Qما الفرق بين scroll وfixed وlocal في background-attachment؟
Aتكمن المختلف في ما يُنسب إليه موضع الخلفية. scroll (الافتراضي): الخلفية مُوضَعة بالنسبة للعنصر وتمرر معه. fixed: الخلفية مثبّتة في إطار العرض وتبقى ثابتة بينما تمرر الصفحة، مولّدةً تأثير التوازي. local: الخلفية مُوضَعة بالنسبة للمحتوى الداخلي للعنصر، فتمرر عندما يمرر المحتوى الداخلي، مثلًا داخل حاوية بها overflow: auto.
Qكيف أنشئ تأثير تمرير متوازي (parallax)؟
Aاضبط background-attachment: fixed، وبما أن الخلفية مثبّتة في إطار العرض، فإن المحتوى الأمامي يتحرك بينما تبقى الخلفية ثابتة — وهذا هو إحساس التوازي. الأسلوب الكلاسيكي هو إعطاء عدة أقسام صور خلفية مختلفة بـ fixed لتتبدّل الخلفيات أثناء التمرير. لاحظ أن iOS وبعض متصفحات الجوال تتجاهل fixed، لذا قد تحتاج إلى معالجة منفصلة.
Qلماذا لا يعمل background-attachment: fixed على الجوال؟
Aيرجع ذلك أساسًا للأداء. تُخفِّض متصفحات الجوال مثل iOS Safari الخلفيات الثابتة إلى scroll لتوفير الذاكرة والحفاظ على سلاسة التمرير، لذلك تمرر الخلفية مع المحتوى. الحلول البديلة: استخدم خلفية عادية بملء العرض على الجوال، أو مكتبة توازٍ في JS (مثل Rellax) مبنية على transform، وفعِّل fixed فقط على سطح المكتب.
Qمتى يجب أن أستخدم القيمة local؟
Aتناسب القيمة local الحاويات التي لها شريط تمرير خاص بها، مثل نوافذ الدردشة بـ overflow: auto أو كتل الكود أو قوائم البيانات. مع background-attachment: local تمرر الخلفية مع المحتوى الداخلي بدلًا من الالتصاق بالحاوية، مما يحاكي بصريًا "ملمس ورق ينتمي للمحتوى".
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
