خاصية خلفية النمط
مثال
نمط خلفية المستند:
document.body.style.background = "#f3f3f3 url('img_tree.png') no-repeat right
top";
المزيد من الأمثلة "جربها بنفسك" أدناه.
التعريف والاستخدام
تقوم خاصية الخلفية بتعيين أو إرجاع ما يصل إلى ثماني خصائص خلفية منفصلة ، في نموذج مختصر.
باستخدام هذه الخاصية ، يمكنك تعيين / إرجاع واحد أو أكثر مما يلي (بأي ترتيب):
- لون الخلفية
- الصورة الخلفية
- تكرار الخلفية
- مرفق الخلفية
- خلفية الموقف
- حجم الخلفية
- أصل الخلفية
- مقطع الخلفية
يمكن أيضًا تعيين الخصائص المذكورة أعلاه بخصائص نمط منفصلة. يوصى بشدة باستخدام خصائص منفصلة للمؤلفين غير المتقدمين لتحسين إمكانية التحكم.
دعم المتصفح
تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم الخاصية بالكامل.
| Property | |||||
|---|---|---|---|---|---|
| background | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
ملاحظة: انظر دعم المستعرض الفردي لكل قيمة أدناه.
بناء الجملة
إرجاع خاصية الخلفية:
object.style.background
قم بتعيين خاصية الخلفية:
object.style.background = "color image
repeat attachment position size origin clip|initial|inherit"
قيم الملكية
| Value | Description |
|---|---|
| color | Sets the background color of an element |
| image | Sets the background image for an element |
| repeat | Sets how a background image will be repeated |
| attachment | Sets whether a background image is fixed or scrolls with the page |
| position | Sets the starting position of a background image |
| size | Sets the size of a background image |
| origin | Sets the background positioning area |
| clip | Sets the painting area of a background image |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
تفاصيل تقنية
| القيمة الافتراضية: | عدم تكرار التمرير الشفاف 0٪ 0٪ مربع حدود مربع الحشو التلقائي |
|---|---|
| قيمة الإرجاع: | سلسلة ، تمثل خلفية العنصر |
| إصدار CSS | CSS1 + خصائص جديدة في CSS3 |
مزيد من الأمثلة
مثال
تغيير خلفية عنصر DIV:
document.getElementById("myDIV").style.background = "url('smiley.gif') blue repeat-x center";
مثال
تعيين لون الخلفية للمستند:
document.body.style.backgroundColor = "red";
مثال
تعيين صورة خلفية للمستند:
document.body.style.backgroundImage = "url('img_tree.png')";
مثال
اضبط صورة الخلفية على عدم التكرار:
document.body.style.backgroundRepeat = "repeat-y";
مثال
اضبط صورة الخلفية ليتم إصلاحها (لن يتم التمرير):
document.body.style.backgroundAttachment = "fixed";
مثال
تغيير موضع صورة الخلفية:
document.body.style.backgroundPosition = "top right";
مثال
إرجاع قيم خاصية الخلفية للمستند:
document.body.style.background;
الصفحات ذات الصلة
دروس CSS: خلفية CSS
دروس CSS3: خلفيات CSS3
مرجع CSS: خاصية الخلفية