خصائص Style background

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

background تُستخدم الخاصية لضبط/إرجاع أكبر ثمانية خصائص خلفية بشكل مختصر.

من خلال هذه الخاصية، يمكنك تعيين/إرجاع الآتي أو أكثر (بأي ترتيب):

خصائص DOM CSS الخاصية
backgroundAttachment background-attachment
backgroundClip background-clip
backgroundColor background-color
backgroundImage background-image
backgroundOrigin background-origin
backgroundPosition background-position
backgroundRepeat background-repeat
backgroundSize background-size

يمكن أيضًا استخدام خصائص النمط الفردية لضبط هذه الخصائص. يُنصح بتجنب استخدام النصائح الفردية للمطورين غير المتقدمين للحصول على تحكم أفضل.

يرجى الرجوع إلى:

دليل CSS3:خلفية CSS

دليل CSS3:خلفيات CSS3

دليل CSS:خصائص background

مثال

تعيين نمط خلفية المستند:

document.body.style.background = "#f3f3f3 url('img_tree.png') no-repeat right top";

تجربة شخصية

هناك أمثلة TIY أكثر في أسفل الصفحة.

النحو

استرداد خاصية background:

الشكل.style.background

تعيين خاصية background:

الشكل.style.background = "اللون الصورة التكرار الإلصاق الموقع الحجم المنشأ القص|الافتراضي|التوريث"

قيمة الخصائص

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

تفاصيل تقنية

القيمة الافتراضية: شفاف غير محدد تكرار تمرير 0% 0% تلقائي حاوية الحدود حاوية الحدود
القيمة المعدلة: السلسلة، تعبر عن خلفية العنصر.
إصدار CSS: CSS1 + خصائص جديدة في CSS3

مزيد من الأمثلة

مثال 2

تغيير لون الخلفية لـ DIV

document.getElementById("myDIV").style.background = "url('smiley.gif') blue repeat-x center";

تجربة شخصية

مثال 3

تعيين لون الخلفية للوثيقة:

document.body.style.backgroundColor = "red";

تجربة شخصية

مثال 4

تعيين صورة الخلفية للوثيقة:

document.body.style.backgroundImage = "url('img_tree.png')";

تجربة شخصية

مثال 5

تعيين صورة الخلفية كغير مكررة:

document.body.style.backgroundRepeat = "repeat-y";

تجربة شخصية

مثال 6

تعيين صورة الخلفية كمتثبتة (لن تتحرك أثناء التمرير):

document.body.style.backgroundAttachment = "fixed";

تجربة شخصية

مثال 7

تغيير موقع صورة الخلفية:

document.body.style.backgroundPosition = "top right";

تجربة شخصية

مثال 8

إرجاع قيمة الخاصية الخلفية للوثيقة:

document.body.style.background;

تجربة شخصية

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

background هي الخاصية الخاصة بـ CSS1 (1996).

يدعم جميع المتصفحات بشكل كامل:

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
الدعم الدعم الدعم الدعم الدعم الدعم

تعليقات

تم إضافة ثلاثة خصائص جديدة في CSS3 (1999):