الخاصية `background-attachment`

الخاصية background-attachment في CSS تُحدِّد إذا كان موضع الصورة (المُحدَّدة عبر الخاصية background-image) ثابتًا (fixed) ضمن إطار العرض (viewport) أو كان سيُمرَّر عند التمرير في العنصر (أو الصفحة) الحاوي له.

بطاقة الخاصية

القيمة الابتدائية	`scroll`
تُطبَّق على	جميع العناصر.
قابلة للوراثة	لا
قابلة للتحريك	نعم
القيمة المحسوبة	كالقيمة المُحدَّدة.

/* كلمات مفتاحية */
background-attachment: scroll;
background-attachment: fixed;
background-attachment: local;

/* القيم العامة */
background-attachment: inherit;
background-attachment: initial;
background-attachment: unset;

أمثلة

مثال بسيط عن استخدام الخاصية background-attachment لجعل موضع صورة الخلفية (المُحدَّدة عبر الخاصية background-image) ثابتًا. شيفرة HTML:

<p>
تهدف موسوعة حسوب لتوفير توثيق عربي كامل وعالي الجودة، مدعّم بالأمثلة لمختلف لغات البرمجة وتقنيات تطوير الويب والجوال. تعتمد الموسوعة على فريق من المحررين والمساهمين المتطوعين أولي الخبرة البرمجية واللغوية، وترحّب بكل من يرغب بالمساهمة فيها. اعرف المزيد عن موسوعة حسوب واطلع على دليل المساهمين.
</p>

شيفرة CSS:

p {
  background-image: url("image.png");
  background-attachment: fixed;
}

مثال عن استخدام أكثر من صورة للخلفية (background-image)، مع تحديد قيمة مختلفة لكلٍ منها عبر الخاصية background-attachment (ويُفصل بين تلك القيم بفاصلة)؛ لاحظ أنَّنا استخدامنا الخاصية background-repeat لضبط كيفية تكرار صورة الخلفية. شيفرة HTML:

<div>
  <p>
    تهدف أكاديمية حسوب إلى توفير دورات، كتب، مقالات ودروس متخصصّة عالية الجودة حول مجالات مُختلفة باللغة العربية. وتركّز أكاديمية حسوب بشكل رئيسي على تعليم البرمجة، إدارة الأعمال بمُختلف تفرّعاتها، التسويق والمبيعات، التصميم والجرافيكس بمُختلف ألوانه، العمل الحر والعمل عن بعد، إدارة الخواديم ومجال DevOps بالإضافة الى الشهادات المتخصصة وشروحات استخدام البرامج والتطبيقات. 
  </p>
  <p>
    باب المُساهمة على الأكاديمية مفتوح لكل من يرى في نفسه القدرة على توفير محتوى عربي عالي الجودة يسهم بتطوير مجتمعنا العربي. للمزيد من التّفاصيل ألق نظرة على صفحة اكتب معنا ان كنت مهتماً بالمساهمة ككاتب، وصفحة درّب معنا إن كنت تمتلك خبرات متخصصة، قادر على إعداد دورات تدريبية وترغب بالانضمام لمدربي أكاديمية حسوب. 
  </p>
  <p>
    ان كنت تبحث عن المزيد، توفر موسوعة حسوب توثيق شامل للغات البرمجة وتقنيات تطوير الويب والجوال.
  </p>
</div>

شيفرة CSS:

div {
  background-image: url("image-1.png"), url("image-2.png");
  background-attachment: fixed, scroll;
  background-repeat: no-repeat, repeat-y;
}

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الرئيسي	1.0	1.0	4	3.5	1.0
خلفيات متعددة	1.0	3.6	9.0	10.5	1.3

البنية العامة

قيمة الخاصية background-attachment تكون إحدى الكلمات المفتاحية الآتية:

`<attachment>`

`fixed`

يكون موضع الخلفية ثابتًا (fixed) بالنسبة إلى إطار العرض، وإذا امتلك العنصر إمكانية التمرير (scroll)، فلن تتحرك الخلفية مع العنصر.

`local`

تكون صورة الخلفية ثابتةً نسبةً إلى محتوى العنصر، فلو امتلك العنصر إمكانية التمرير فستتحرك الخلفية مع محتوى العنصر.

`scroll`

تكون الخلفية ثابتةً نسبةً إلى العنصر نفسه ولا تتحرك مع محتوياته.

البنية الرسمية

background-attachment: <attachment>#;

يمكن تكرار القيم لتطبيقها على أكثر من صورة خلفية بفصلها بفاصلة ,.

<attachment> = scroll | fixed | local

انظر أيضًا

صفحة الخاصيات التي تضبطها الخاصية المختصرة background وهي: background-clip، و background-color، و background-image، وbackground-origin، و background-position، و background-repeat، و background-size.
صفحة العنصر <img> الذي يُستخدَم لإضافة صور إلى المستند.
لإضافة لون بدلًا من الصورة، فاستخدام الخاصية background-color.

مصادر ومواصفات

مواصفة CSS Backgrounds and Borders Module Level 3، سمحت هذه المواصفة للخاصية بدعم تعدد الخلفيات، وأضافت القيمة local.
مواصفة ‎CSS Level 2 (Revision 1)‎.
مواصفة CSS Level 1.

الخاصية background-attachment