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

<noinclude>{{DISPLAYTITLE:الخاصية <code>background-size</code>}}</noinclude>
الخاصية <code>background-clip</code> في CSS تُحدِّد أبعاد صورة الخلفية للعنصر؛ ويمكن أن تُترَك الأبعاد الابتدائية للصورة، أو تُغيّر إلى أبعاد جديدة، أو يمكن ملء المساحة المتوافرة بها مع الحفاظ على نسبة الأبعاد.<syntaxhighlight lang="css">
/* الكلمات المفتاحية */
background-size: cover;
background-size: contain;

/* تحديد قيمة واحدة، التي تُمثِّل عرض الصورة وسيكون الارتفاع تلقائيًا */
background-size: 50%;
background-size: 3.2em;
background-size: 12px;
background-size: auto;

/* تحديد قيمتين، الأولى هي العرض والثانية هي الارتفاع */
background-size: 50% auto;
background-size: 3em 25%;
background-size: auto 6px;
background-size: auto auto;

/* تعدد الخلفيات */
background-size: auto, auto; /* ليست `auto auto` */
background-size: 50%, 25%, 25%;
background-size: 6px, auto, contain;

/* القيم العامة */
background-size: inherit;
background-size: initial;
background-size: unset;
</syntaxhighlight>لاحظ أنَّ الفراغات التي لا تغطى من صورة الخلفية ستُملأ بقيمة الخاصية <code>[[CSS/background-color|background-color]]</code>، ويجدر بالذكر أنَّ من الممكن مشاهدة لون الخلفية إذا كانت صورة الخلفية تحتوي على شفافية.
{| class="wikitable" style="width: 100%;"
|-
! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]]
|<code>auto auto</code>
|-
! scope="row" |تُطبَّق على
|جميع العناصر.
|-
! scope="row" |قابلة للوراثة
|لا
|-
!قابلة للتحريك
|نعم
|-
!النسب المئوية
|تكون نسبةً لمساحة الخلفية.
|-
! scope="row" |القيمة المحسوبة
|كما حُدِّدَت، لكن ستحوّل الأطوال النسبية إلى مطلقة.
|}

== أمثلة ==
سنستخدم في هذه الأمثلة صورةً باسم <code>image.png</code> أبعادها 960px عرضًا و 640px ارتفاعًا، أي نسبة الطول إلى العرض هي 3:2، وهي أكبر من الحاوية (التي ارتفاعها يساوي 150px)؛ وسنحاول توضيح أغلبية الحالات.

إذا تركنا القيمة الافتراضية لهذه الخاصية، فستحافظ الصورة على أبعادها الأصلية، أي أنها لن تظهر كلها في العنصر (لأن ارتفاع العنصر أقل من ارتفاع الصورة):<syntaxhighlight lang="css">
background-size: auto auto;
</syntaxhighlight>إذا حددنا قيمة العرض والطول للصورة، فستعرض وفق الأبعاد المحددة مع أنَّها قد تبدو مشوّهة إن لم تكن تلك الأبعاد متناسقة ومتناسبة مع نسبة الطول إلى العرض:<syntaxhighlight lang="css">
background-size: 120px 80px;
</syntaxhighlight>يمكننا أيضًا استخدام النسب المئوية لتحديد أبعاد الصورة، لكن لاحظ أنَّ ذلك سيؤدي في أغلبية الحالات إلى تغيير نسبة أبعاد الصورة، مما يشوِّهها:<syntaxhighlight lang="css">
background-size: 100% 50%;
</syntaxhighlight>الكلمة المحجوزة <code>contain</code> ستُعيد تحجم صورة الخلفية لتجعلها ظاهرةً كلها في العنصر:<syntaxhighlight lang="css">
background-size: contain;
</syntaxhighlight>أما الكلمة المحجوزة <code>cover</code> فستعيد تحجم صورة الخلفية لكي تتم تغطية كامل مساحة العنصر:<syntaxhighlight lang="css">
background-size: cover;
</syntaxhighlight>

==دعم المتصفحات==
{| class="wikitable"
!الميزة
!|Chrome
!Firefox
!Internet Explorer
!Opera
!Safari
|-
! الدعم الأساسي
|1.0
|3.6
|9.0
|9.5
|3.0
|-
! استخدام صور SVG كخلفية
|44.0
|8.0
|9.0
|31.0
|؟
|}

== البنية العامة ==
يمكن تحديد الخاصية <code>background-size</code> بإحدى الطرائق الآتية:
* باستخدام الكلمة المحجوزة <code>[[#contain|contain]]</code> أو <code>[[#cover|cover]]</code>.
* بتحديد قيمة العرض فقط، مما يؤدي إلى ضبط الارتفاع تلقائيًا إلى <code>[[#auto|auto]]</code>.
* باستخدام قيمة للعرض والارتفاع معًا، وستُمثِّل القيمة الأولى قيمة العرض، والقيمة الثانية قيمة الارتفاع، ويمكن أن تكون كل قيمةٍ منهما إما طولًا <code>[[CSS/length|<length>]]</code> أو نسبةً مئويةً <code>[[CSS/percentage|<percentage>]]</code> أو <code>auto</code>.
ولتحديد أبعاد عدِّة صورة خلفية، فيمكن فصل كل قيمة عن الأخرى بفاصلة.

=== القيمة <code><bg-size></code> ===
==== <code>contain</code> ====
تكبير الصورة بأكثر قدر ممكن دون قص جزء منها أو تشويهها.

==== <code>cover</code> ====
تكبير الصورة بأكثر قدر ممكن دون تشويهها، وإذا كانت نسبة أبعاد الصورة تختلف عن العنصر، فستُقص إما رأسيًا أو أفقيًا كيلا تبقى أيّة مسافات فارغة.

==== <code>auto</code> ====
تكبير صورة الخلفية في الاتجاه المُحدَّد مع الإبقاء على نسبة الأبعاد الأصلية.

==== <code>[[CSS/length|<length>]]</code> ====
تكبير الصورة في اتجاهٍ معيّن بمقدارٍ محدد، ولا يُسمَح باستخدام القيم السالبة.

==== <code>[[CSS/percentage|<percentage>]]</code> ====
تكبير الصورة في اتجاهٍ معيّن بنسبةٍ مئوية محددة نسبةً إلى مساحة الخلفية، التي تُحدَّد حسب قيمة الخاصية <code>[[CSS/background-origin|background-origin]]</code> (وتكون قيمتها الافتراضية هي <code>[[CSS/background-origin#padding-box|padding-box]]</code>)؛ لكن إن كانت قيمة الخاصية <code>[[CSS/background-attachment|background-attachment]]</code> هي <code>[[CSS/background-attachment#fixed|fixed]]</code>، فستكون القيمة نسبةً إلى كامل إطار العرض (viewport)؛ ولا يُسمَح باستخدام القيم السالبة.

=== الأبعاد الفعلية ===
يعتمد حساب قيم هذه الخاصية على الأبعاد الفعلية للصورة (العرض والطول) وعلى نسبة الأبعاد الفعلية (نسبة العرض إلى الارتفاع)، وتكون كما يلي:
* الصور التي لها أبعاد فعلية ونسبة عرض إلى ارتفاع فعلية، مثل صورة JPEG أو PNG أو غيرها من الصور النقطية.
* الصور التي ليس لها أبعاد فعلية، لكن لها نسبة أبعاد (aspect ratio) مُحدِّدة بين طولها وعرضها، كما في صورة SVG أو غيرها من الصيغ المتجهية.
* الصور التي ليس لها أبعاد فعلية وليس لها نسبة أبعاد محددة، مثل التدرجات اللونية في CSS.
اعتمادًا على الأبعاد الفعلية ونسبة العرض إلى الارتفاع، ستُحسَب الأبعاد المعروضة للصورة كما يلي:
* إذا حُدِّدَت قيمتان للخاصية <code>background-size</code> ولم تكونا <code>auto</code>: فستُعرَض الصورة بالأبعاد المُحدَّدة.
* إذا كانت قيمة الخاصية <code>background-size</code> هي <code>contain</code> أو <code>cover</code>: ستُعرَض الصورة بأكبر أبعاد ممكنة ضمن (أو تغطي) مساحة الخلفية المتاحة مع الحفاظ على نسبة الأبعاد، وإن لم يكن للصورة نسبة أبعاد فستُعرَض على كامل مساحة الخلفية.
* إذا كانت قيمة الخاصية <code>background-size</code> تساوي <code>auto</code> أو <code>auto auto</code>:
** إذا كان للصورة أبعاد في كلا الاتجاهين، فستُعرَض بتلك الأبعاد.
** إذا لم يكن للصورة أبعاد فعلية ولا نسبة أبعاد، فستعرَض على كامل مساحة الخلفية.
** إذا لم يكن للصورة أبعاد فعلية لكن كان لها نسبة أبعاد، فستُعرَض كما لو كنّا قد حددنا القيمة <code>contain</code> لهذه الخاصية.
** إذا كان للصورة بُعد في اتجاه واحد وكان لها نسبة أبعاد، فسيكون أحد أبعاد معلوم القيمة وسيتم حساب الآخر اعتمادًا على نسبة الأبعاد.
** إذا كان للصورة بُعد في اتجاه واحد ولم يكن لها نسبة أبعاد، فسيكون أحد أبعادها معلومًا وسيكون الآخر مساويًا لقيمة أحد أبعاد مساحة الخلفية المتاحة.
* إذا كانت إحدى قيم الخاصية <code>background-size</code> تساوي <code>auto</code> والأخرى لا تساوي <code>auto</code>:
** إذا كان للصورة نسبة أبعاد، فسيتم تكبيرها لتصل إلى القيمة المضبوطة، وسيُحسَب البُعد الآخر اعتمادًا على نسبة الأبعاد.
** إذا لم يكن للصورة نسبة أبعاد، فسيتم تكبيرها لتصل إلى القيمة المضبوطة، أما البعد الآخر فسيُحسب اعتمادًا على البعد الفعلي للصورة إن كان موجودًا، فإن لم يكن موجودًا فسيكون مساويًا للبُعد الموافق له من مساحة الخلفية المتاحة.
ملاحظة: تحديد أبعاد صور الخلفية إذا كانت صورًا متجهية (vector) دون أبعاد فعلية أو نسبة أبعاد ليس مُطبقًا في جميع المتصفحات تطبيقًا تامًا. فخذ حذرك ولا تعتمد على الكلام المشروح أعلاه، وجرِّب في عدِّة متصفحات حتى تتأكد أنَّ القيمة مقبولة.

=== البنية الرسمية ===
<syntaxhighlight lang="css">
background-size: <bg-size>#;

</syntaxhighlight>يمكن تكرار القيمة <code><bg-size></code> أكثر من مرة لكي تُعرِّف أبعاد كل صورة من صور الخلفية.<syntaxhighlight lang="css">
<bg-size> = [ <length-percentage> | auto ]{1,2} | cover | contain

</syntaxhighlight>حيث:<syntaxhighlight lang="css">
<length-percentage> = <length> | <percentage>

</syntaxhighlight>

== مصادر ومواصفات ==
* مواصفة [https://drafts.csswg.org/css-backgrounds-3/#the-background-size CSS Backgrounds and Borders Module Level 3]. 
[[تصنيف:CSS]]
[[تصنيف:CSS Property]]
[[تصنيف:CSS Background]]