خصوصيات background-position CSS
- الصفحة السابقة background-origin
- الصفحة التالية background-position-x
التعريف والاستخدام
background-position يحدد هذا الخصائص موقع بدء الصورة الخلفية.
يحدد هذا الخصائص الصورة الأصلية للخلفية (بالمصدر background-image الموقع الذي يتم فيه تحديد (التعريف)، إذا كان الصورة الخلفية بحاجة إلى تكرار، فإنها تبدأ من هذا النقطة.
نصيحة:يجب أن تضبط خاصية background-attachment إلى "ثابت، لضمان عمل الخاصية بشكل صحيح في فايرفوكس وأوبرا.
انظر أيضًا:
دليل CSS التعليماتخلفية CSS
دليل CSSخصائص background-image
دليل HTML DOMخصائص backgroundPosition
مثال
كيفية تحديد موقع صورة الخلفية:
الجسم
{
background-image:url('bgimage.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
الجملة CSS
background-position: value;
قيمة الخاصية
| القيمة | الوصف |
|---|---|
|
إذا كنت قد نصبت كلمة مفتاحية واحدة فقط، فإن القيمة الثانية ستكون "center". القيمة الافتراضية: 0% 0%. |
| x% y% |
القيمة الأولى هي الموقع الأفقي، والقيمة الثانية هي الموقع العمودي. الجزء العلوي الأيسر هو 0% 0%. والجزء السفلي الأيمن هو 100% 100%. إذا كنت قد نصبت قيمة واحدة فقط، فإن القيمة الأخرى ستكون 50%. |
| xpos ypos |
القيمة الأولى هي الموقع الأفقي، والقيمة الثانية هي الموقع العمودي. الجزء العلوي الأيسر هو 0 0. الوحدة هي البكسل (0px 0px) أو أي وحدة CSS أخرى. إذا كنت قد نصبت قيمة واحدة فقط، فإن القيمة الأخرى ستكون 50%. يمكنك الجمع بين % و القيم الموضوعة في position. |
تفاصيل التقنية
| القيمة الافتراضية: | 0% 0% |
|---|---|
| التوريث: | لا |
| الإصدار: | CSS1 |
| جافا سكريبت الجملة: | الجسم.style.backgroundPosition="center" |
مزيد من الأمثلة
- كيفية استخدام % لتحديد موقع صورة الخلفية
- هذا المثال يوضح كيفية استخدام النسبة المئوية لتحديد موقع صورة الخلفية على الصفحة.
- كيفية استخدام البكسل لتحديد موقع صورة الخلفية
- هذا المثال يوضح كيفية استخدام البكسل لتحديد موقع صورة الخلفية على الصفحة.
دعم المتصفح
الرقم في الجدول يشير إلى إصدار المتصفح الأول الذي يدعم هذه الخاصية بالكامل.
| كروم | إيدج | فايرفوكس | سفاري | أوبرا |
|---|---|---|---|---|
| كروم | IE / إيدج | فايرفوكس | سفاري | أوبرا |
| 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
- الصفحة السابقة background-origin
- الصفحة التالية background-position-x
