عرض مصدر CSS/background-attachment

<noinclude>{{DISPLAYTITLE:الخاصية <code>background-attachment</code>}}</noinclude>
الخاصية <code>background-attachment</code> في CSS تُحدِّد إذا كان موضع الصورة (المُحدَّدة عبر الخاصية <code>[[CSS/background-image|background-image]]</code>) ثابتًا (fixed) ضمن إطار العرض (viewport) أو كان سيُمرَّر عند التمرير في العنصر (أو الصفحة) الحاوي له.

== بطاقة الخاصية ==
{| class="wikitable" style="width: 100%;"
|-
! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]]
|<code>scroll</code>
|-
! scope="row" |تُطبَّق على
|جميع العناصر.
|-
! scope="row" |قابلة للوراثة
|لا
|-
!قابلة للتحريك
|نعم
|-
! scope="row" |القيمة المحسوبة
|كالقيمة المُحدَّدة.
|}<syntaxhighlight lang="css">
/* كلمات مفتاحية */
background-attachment: scroll;
background-attachment: fixed;
background-attachment: local;

/* القيم العامة */
background-attachment: inherit;
background-attachment: initial;
background-attachment: unset;
</syntaxhighlight>
== أمثلة ==
مثال بسيط عن استخدام الخاصية <code>background-attachment</code> لجعل موضع صورة الخلفية (المُحدَّدة عبر الخاصية <code>[[CSS/background-image|background-image]]</code>) ثابتًا. شيفرة HTML:<syntaxhighlight lang="html">
<p>
تهدف موسوعة حسوب لتوفير توثيق عربي كامل وعالي الجودة، مدعّم بالأمثلة لمختلف لغات البرمجة وتقنيات تطوير الويب والجوال. تعتمد الموسوعة على فريق من المحررين والمساهمين المتطوعين أولي الخبرة البرمجية واللغوية، وترحّب بكل من يرغب بالمساهمة فيها. اعرف المزيد عن موسوعة حسوب واطلع على دليل المساهمين.
</p>
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
p {
  background-image: url("image.png");
  background-attachment: fixed;
}
</syntaxhighlight>مثال عن استخدام أكثر من صورة للخلفية (<code>[[CSS/background-image|background-image]]</code>)، مع تحديد قيمة مختلفة لكلٍ منها عبر الخاصية <code>background-attachment</code> (ويُفصل بين تلك القيم بفاصلة)؛ لاحظ أنَّنا استخدامنا الخاصية <code>[[CSS/background-repeat|background-repeat]]</code> لضبط كيفية تكرار صورة الخلفية.

شيفرة HTML:<syntaxhighlight lang="html">
<div>
  <p>
    تهدف أكاديمية حسوب إلى توفير دورات، كتب، مقالات ودروس متخصصّة عالية الجودة حول مجالات مُختلفة باللغة العربية. وتركّز أكاديمية حسوب بشكل رئيسي على تعليم البرمجة، إدارة الأعمال بمُختلف تفرّعاتها، التسويق والمبيعات، التصميم والجرافيكس بمُختلف ألوانه، العمل الحر والعمل عن بعد، إدارة الخواديم ومجال DevOps بالإضافة الى الشهادات المتخصصة وشروحات استخدام البرامج والتطبيقات. 
  </p>
  <p>
    باب المُساهمة على الأكاديمية مفتوح لكل من يرى في نفسه القدرة على توفير محتوى عربي عالي الجودة يسهم بتطوير مجتمعنا العربي. للمزيد من التّفاصيل ألق نظرة على صفحة اكتب معنا ان كنت مهتماً بالمساهمة ككاتب، وصفحة درّب معنا إن كنت تمتلك خبرات متخصصة، قادر على إعداد دورات تدريبية وترغب بالانضمام لمدربي أكاديمية حسوب. 
  </p>
  <p>
    ان كنت تبحث عن المزيد، توفر موسوعة حسوب توثيق شامل للغات البرمجة وتقنيات تطوير الويب والجوال.
  </p>
</div>
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
div {
  background-image: url("image-1.png"), url("image-2.png");
  background-attachment: fixed, scroll;
  background-repeat: no-repeat, repeat-y;
}
</syntaxhighlight>

==دعم المتصفحات==
{| class="wikitable"
!الميزة
!|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
|}

== البنية العامة ==
قيمة الخاصية <code>background-attachment</code> تكون إحدى الكلمات المفتاحية الآتية: 
=== <code rel="mw:WikiLink" title="CSS/color value" href="CSS/color value"><attachment></code> ===

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

==== <code>local</code> ====
تكون صورة الخلفية ثابتةً نسبةً إلى محتوى العنصر، فلو امتلك العنصر إمكانية التمرير فستتحرك الخلفية مع محتوى العنصر.

==== <code>scroll</code> ====
تكون الخلفية ثابتةً نسبةً إلى العنصر نفسه ولا تتحرك مع محتوياته.

=== البنية الرسمية ===
<syntaxhighlight lang="css">
background-attachment: <attachment>#;
</syntaxhighlight>يمكن تكرار القيم لتطبيقها على أكثر من صورة خلفية بفصلها بفاصلة <code>,</code>.<syntaxhighlight lang="css">
<attachment> = scroll | fixed | local

</syntaxhighlight>

== انظر أيضًا ==
* صفحة الخاصيات التي تضبطها الخاصية المختصرة <code>[[CSS/background|background]]</code> وهي: <code>[[CSS/background-clip|background-clip]]</code>، و <code>[[CSS/background-color|background-color]]</code>، و <code>[[CSS/background-image|background-image]]</code>، و<code>[[CSS/background-origin|background-origin]]</code>، و <code>[[CSS/background-position|background-position]]</code>، و <code>[[CSS/background-repeat|background-repeat]]</code>، و <code>[[CSS/background-size|background-size]]</code>.
* صفحة العنصر <code>[[HTML/img|<img>]]</code> الذي يُستخدَم لإضافة صور إلى المستند.
* لإضافة لون بدلًا من الصورة، فاستخدام الخاصية <code>[[CSS/background-color|background-color]]</code>.

== مصادر ومواصفات ==
* مواصفة [https://drafts.csswg.org/css-backgrounds-3/#the-background-attachment CSS Backgrounds and Borders Module Level 3]، سمحت هذه المواصفة للخاصية بدعم تعدد الخلفيات، وأضافت القيمة <code>[[#local|local]]</code>.
* مواصفة ‎[http://www.w3.org/TR/CSS2/colors.html#propdef-background-attachment CSS Level 2 (Revision 1)‎].
* مواصفة [http://www.w3.org/TR/CSS1/#background-attachment CSS Level 1].
[[تصنيف:CSS|{{SUBPAGENAME}}]]
[[تصنيف:CSS Property|{{SUBPAGENAME}}]]
[[تصنيف:CSS Background|{{SUBPAGENAME}}]]