ویژگی 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