خصوصيات background-position-y CSS

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

background-position-y الخصائص تستخدم لتحديد موقع صورة الخلفية على المحور y.

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

مثال

مثال 1

كيفية تحديد موقع صورة الخلفية على المحور y:

div {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-y: center;
}

جرب بنفسك

مثال 2

كيفية تحديد موقع صورة الخلفية في الأعلى:

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position-y: bottom;
}

جرب بنفسك

مثال 3

كيفية تحديد الصورة الخلفية في محور y باستخدام النسبة المئوية:

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position-y: 50%;
}

جرب بنفسك

مثال 4

كيفية تحديد الصورة الخلفية في محور y باستخدام البكسل:

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position-y: 80px;
}

جرب بنفسك

القواعد النصية لـ CSS

background-position-y: value;

قيمة الخاصية

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

دعم المتصفح

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

الصفحات ذات الصلة

دليل تعليمي:خلفيات CSS

مرجع CSS:خصائص background-image

مرجع CSS:خصائص background-position

مرجع CSS:خصائص background-position-x

مرجع HTML DOM:خصائص backgroundPosition