CSS background-position-x خصوصیات

تعریف و استفاده

background-position-x ویژگی تنظیم موقعیت تصویر پس‌زمینه در محور x است.

توجه:به صورت پیش‌فرض، تصویر پس‌زمینه در گوشه بالا چپ قرار دارد و در جهت افقی و عمودی تکرار می‌شود.

مثال

مثال 1

چگونه تصویر پس‌زمینه را در محور x قرار دهیم:

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

آزمایش کنید

مثال 2

چگونه تصویر پس‌زمینه را در سمت راست قرار دهیم:

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-x: right;
}

آزمایش کنید

مثال 3

چگونه از قرارگیری تصویر پس‌زمینه با استفاده از درصد استفاده کنیم:

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

آزمایش کنید

مثال 4

چگونه از قرارگیری تصویر پس‌زمینه با استفاده از پیکسل استفاده کنیم:

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-x: 150px;
}

آزمایش کنید

مثال 5

استفاده از ویژگی‌های پس‌زمینه مختلف برای ایجاد یک تصویر پس‌زمینه که بپوشاند محیط خود را:

.hero-image {
  background-image: url("photographer.jpg"); /* استعمال تصویر */
  background-color: #cccccc; /* اگر تصویر موجود نباشد، از این رنگ استفاده شود */
  height: 300px; /* ارتفاع الزامی است */
  background-position-x: center; /* تصویر را در مرکز قرار دهید */
  background-repeat: no-repeat; /* تصویر را تکرار نکنید */
  background-size: cover; /* اندازه‌ی تصویر پس‌زمینه را تنظیم کنید تا کل قالب را پوشش دهد */
}

آزمایش کنید

جملات نویسی CSS

background-position-x: value;

مقدار ویژگی

جزئیات فنی

پشتیبانی مرورگر

اعداد در جدول نشان‌دهنده نسخه‌ای از مرورگرها است که این ویژگی را کامل پشتیبانی می‌کنند.

صفحات مرتبط

تدریس:CSS پس منظر

CSS 参考：background-image کا متغیر

CSS 参考：background-position کا متغیر

CSS 参考：background-position-y کا متغیر

HTML DOM 参考：backgroundPosition کا متغیر