خصوصيات background-image CSS

وصف التدريب

تعريف والاستخدام background-image

يُحدد الخاصية الخلفية للعنصر إعداد الصورة الخلفية للعنصر.

بالافتراض، تملأ الصورة الخلفية حجم العنصر الكامل، بما في ذلك الحواف الداخلية والخارجية، ولكن لا تشمل الهوامش الخارجية.

نصيحة:بالافتراض، تُوضع الصورة الخلفية في الزاوية العلوية اليسرى للعنصر وتكرر في الاتجاهين العمودي والأفقي.

تفاصيل

يضبط background-image الخاصية صورة في الخلفية للعنصر.

بناءً على background-repeat قيمة الخاصية، يمكن للصورة أن تتكرر إلى الأبد أو أن تتكرر على محور معين (المحور x أو المحور y) أو لا تتكرر على الإطلاق.

الصورة الخلفية الأصلية (الصورة الأصلية) تعتمد على background-position وضع القيمة الخاصة بالخاصية.

انظر أيضًا:

دليل CSSخلفيات CSSوخلفيات CSS (مقدمة متقدمة)وتدرج CSS

دليل HTML DOMخصائص backgroundImage

مثال

ضبط الصورة كخلفية للصفحة:

body
  { 
  background-image: url(bgimage.gif);
  background-color: #000000;
  }

تجربة بنفسك

جافا سكربت CSS

background-image: url|لا شيء|القيمة الافتراضية|توريث;

قيمة الخاصية

قيمة الخاصية

القيمة الوصف
url('URL) مسار الصورة.
لا شيء القيمة الافتراضية. لا تظهر الصورة الخلفية.
توريث يحدد يجب أن يتم توريث إعداد background-image الخاص بالعنصر الأب.

تفاصيل التقنية

القيمة الافتراضية: لا شيء
التنسيق: لا
الإصدار: CSS1
جافا سكربت: object.style.backgroundImage="url(stars.gif)"

دعم المتصفح

الرقم في الجدول يشير إلى إصدار أولي من متصفح يدعم هذه الخاصية بالكامل.

Chrome Edge Firefox Safari Opera
Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5