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

صفحه قبل background-position
صفحه بعدی background-position-y

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

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;

مقدار ویژگی

مقدار	توضیحات
left	پس‌زمینه را در سمت چپ محور x قرار می‌دهد.
right	پس‌زمینه را در سمت راست محور x قرار می‌دهد.
center	پس‌زمینه را در مرکز محور x قرار می‌دهد.
x%	سمت چپ محور x 0% و سمت راست 100% است. نسبت‌های درصدی نشان‌دهنده عرض محدوده‌ی موقعیت پس‌زمینه است که از عرض تصویر پس‌زمینه کم می‌شود.
xpos	فاصله افقی از سمت چپ. واحدها می‌تواند پیکسل (مانند 0px) یا دیگر باشد یکای‌های CSS.
xpos مغایره	اسکالپولار دوگانه، تنها در Firefox و Safari پشتیبانی می‌شود. xpos به left یا right تنظیم شود مغایره فاصله افقی بین تصویر پس‌زمینه و سمت چپ یا راست xpos تنظیم شده است واحدها می‌تواند پیکسل یا دیگر باشد یکای‌های CSS.
initial	این ویژگی را به مقدار پیش‌فرض خود تنظیم می‌کند. به: initial.
inherit	این ویژگی را از عنصر پدر خود ارث می‌برد. به: inherit.

جزئیات فنی

مقدار پیش‌فرض:	0%
erbستگی:	خیر
انیمیشن:	پشتیبانی می‌شود. لطفاً به:ویژگی‌های مرتبط با انیمیشن.
نسخه:	CSS3
نوشتار زبان JavaScript:	object.style.backgroundPositionX="center"

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

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

	Chrome	Edge	Firefox	Safari	Opera
اسکالپولار تک‌گانه	1.0	12.0	49.0	1.0	15.0
اسکالپولار دوگانه	پشتیبانی نمی‌شود	پشتیبانی نمی‌شود	49.0	15.4	پشتیبانی نمی‌شود