CSS/background-size

الخاصية background-clip في CSS تُحدِّد أبعاد صورة الخلفية للعنصر؛ ويمكن أن تُترَك الأبعاد الابتدائية للصورة، أو تُغيّر إلى أبعاد جديدة، أو يمكن ملء المساحة المتوافرة بها مع الحفاظ على نسبة الأبعاد.

لاحظ أنَّ الفراغات التي لا تغطى من صورة الخلفية ستُملأ بقيمة الخاصية background-color، ويجدر بالذكر أنَّ من الممكن مشاهدة لون الخلفية إذا كانت صورة الخلفية تحتوي على شفافية.

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

القيمة الابتدائية	auto auto
تُطبَّق على	جميع العناصر.
قابلة للوراثة	لا
قابلة للتحريك	نعم
النسب المئوية	تكون نسبةً لمساحة الخلفية.
القيمة المحسوبة	كما حُدِّدَت، لكن ستحوّل الأطوال النسبية إلى مطلقة.

/* الكلمات المفتاحية */
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;

أمثلة

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

إذا تركنا القيمة الافتراضية لهذه الخاصية، فستحافظ الصورة على أبعادها الأصلية، أي أنها لن تظهر كلها في العنصر (لأن ارتفاع العنصر أقل من ارتفاع الصورة):

background-size: auto auto;

إذا حددنا قيمة العرض والطول للصورة، فستعرض وفق الأبعاد المحددة مع أنَّها قد تبدو مشوّهة إن لم تكن تلك الأبعاد متناسقة ومتناسبة مع نسبة الطول إلى العرض:

background-size: 120px 80px;

يمكننا أيضًا استخدام النسب المئوية لتحديد أبعاد الصورة، لكن لاحظ أنَّ ذلك سيؤدي في أغلبية الحالات إلى تغيير نسبة أبعاد الصورة، مما يشوِّهها:

background-size: 100% 50%;

الكلمة المحجوزة contain ستُعيد تحجم صورة الخلفية لتجعلها ظاهرةً كلها في العنصر:

background-size: contain;

أما الكلمة المحجوزة cover فستعيد تحجم صورة الخلفية لكي تتم تغطية كامل مساحة العنصر:

background-size: cover;

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

الميزة	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	؟

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

يمكن تحديد الخاصية background-size بإحدى الطرائق الآتية:

• باستخدام الكلمة المحجوزة contain أو cover.
• بتحديد قيمة العرض فقط، مما يؤدي إلى ضبط الارتفاع تلقائيًا إلى auto.
• باستخدام قيمة للعرض والارتفاع معًا، وستُمثِّل القيمة الأولى قيمة العرض، والقيمة الثانية قيمة الارتفاع، ويمكن أن تكون كل قيمةٍ منهما إما طولًا <length> أو نسبةً مئويةً <percentage> أو auto.

ولتحديد أبعاد عدِّة صورة خلفية، فيمكن فصل كل قيمة عن الأخرى بفاصلة.

<bg-size>

contain

تكبير الصورة بأكثر قدر ممكن دون قص جزء منها أو تشويهها.

cover

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

auto

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

<length>

تكبير الصورة في اتجاهٍ معيّن بمقدارٍ محدد، ولا يُسمَح باستخدام القيم السالبة.

<percentage>

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

الأبعاد الفعلية

يعتمد حساب قيم هذه الخاصية على الأبعاد الفعلية للصورة (العرض والطول) وعلى نسبة الأبعاد الفعلية (نسبة العرض إلى الارتفاع)، وتكون كما يلي:

• الصور التي لها أبعاد فعلية ونسبة عرض إلى ارتفاع فعلية، مثل صورة JPEG أو PNG أو غيرها من الصور النقطية.
• الصور التي ليس لها أبعاد فعلية، لكن لها نسبة أبعاد (aspect ratio) مُحدِّدة بين طولها وعرضها، كما في صورة SVG أو غيرها من الصيغ المتجهية.
• الصور التي ليس لها أبعاد فعلية وليس لها نسبة أبعاد محددة، مثل التدرجات اللونية في CSS.

اعتمادًا على الأبعاد الفعلية ونسبة العرض إلى الارتفاع، ستُحسَب الأبعاد المعروضة للصورة كما يلي:

• إذا حُدِّدَت قيمتان للخاصية background-size ولم تكونا auto: فستُعرَض الصورة بالأبعاد المُحدَّدة.
• إذا كانت قيمة الخاصية background-size هي contain أو cover: ستُعرَض الصورة بأكبر أبعاد ممكنة ضمن (أو تغطي) مساحة الخلفية المتاحة مع الحفاظ على نسبة الأبعاد، وإن لم يكن للصورة نسبة أبعاد فستُعرَض على كامل مساحة الخلفية.
• إذا كانت قيمة الخاصية background-size تساوي auto أو auto auto:
  • إذا كان للصورة أبعاد في كلا الاتجاهين، فستُعرَض بتلك الأبعاد.
  • إذا لم يكن للصورة أبعاد فعلية ولا نسبة أبعاد، فستعرَض على كامل مساحة الخلفية.
  • إذا لم يكن للصورة أبعاد فعلية لكن كان لها نسبة أبعاد، فستُعرَض كما لو كنّا قد حددنا القيمة contain لهذه الخاصية.
  • إذا كان للصورة بُعد في اتجاه واحد وكان لها نسبة أبعاد، فسيكون أحد أبعاد معلوم القيمة وسيتم حساب الآخر اعتمادًا على نسبة الأبعاد.
  • إذا كان للصورة بُعد في اتجاه واحد ولم يكن لها نسبة أبعاد، فسيكون أحد أبعادها معلومًا وسيكون الآخر مساويًا لقيمة أحد أبعاد مساحة الخلفية المتاحة.
• إذا كانت إحدى قيم الخاصية background-size تساوي auto والأخرى لا تساوي auto:
  • إذا كان للصورة نسبة أبعاد، فسيتم تكبيرها لتصل إلى القيمة المضبوطة، وسيُحسَب البُعد الآخر اعتمادًا على نسبة الأبعاد.
  • إذا لم يكن للصورة نسبة أبعاد، فسيتم تكبيرها لتصل إلى القيمة المضبوطة، أما البعد الآخر فسيُحسب اعتمادًا على البعد الفعلي للصورة إن كان موجودًا، فإن لم يكن موجودًا فسيكون مساويًا للبُعد الموافق له من مساحة الخلفية المتاحة.

ملاحظة: تحديد أبعاد صور الخلفية إذا كانت صورًا متجهية (vector) دون أبعاد فعلية أو نسبة أبعاد ليس مُطبقًا في جميع المتصفحات تطبيقًا تامًا. فخذ حذرك ولا تعتمد على الكلام المشروح أعلاه، وجرِّب في عدِّة متصفحات حتى تتأكد أنَّ القيمة مقبولة.

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

background-size: <bg-size>#;

يمكن تكرار القيمة <bg-size> أكثر من مرة لكي تُعرِّف أبعاد كل صورة من صور الخلفية.

<bg-size> = [ <length-percentage> | auto ]{1,2} | cover | contain

حيث:

<length-percentage> = <length> | <percentage>

انظر أيضًا

• صفحة الخاصيات التي تضبطها الخاصية المختصرة background وهي: background-clip، و background-color، و background-image، و background-origin، و background-position، و background-repeat، و background-attachment.

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

• مواصفة CSS Backgrounds and Borders Module Level 3.