Atrybut background-position-x CSS

poprzednia strona background-position
Następna strona background-position-y

Definicja i zastosowanie

background-position-x Ustawia pozycję obrazu tła na osi x.

Wskazówka:Domyślnie, obraz tła umieszczony jest w lewym górnym rogu elementu i powtarza się w pionie i poziomie.

Przykład

Przykład 1

Jak lokalizować obraz tła na osi x:

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

Spróbuj sam

Przykład 2

Jak umieścić obraz tła po prawej stronie:

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

Spróbuj sam

Przykład 3

Jak używać lokalizacji obrazu tła w procentach:

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

Spróbuj sam

Przykład 4

Jak używać pixelowej lokalizacji obrazu tła:

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

Spróbuj sam

Przykład 5

Tworzenie tła z obrazem, który pokrywa kontener:

.hero-image {
  background-image: url("photographer.jpg"); /* Używane obrazy */
  background-color: #cccccc; /* Użyj tego koloru, jeśli obraz jest niedostępny */
  height: 300px; /* Musisz ustawić wysokość */
  background-position-x: center; /* Umieść obraz w środku */
  background-repeat: no-repeat; /* Nie powtarzaj obrazu */
  background-size: cover; /* Dostosuj rozmiar obrazu tła, aby pokryć cały kontener */
}

Spróbuj sam

Gramatyka CSS

background-position-x: value;

Wartość atrybutu

Wartość	Opis
left	Umieść pozycję tła na lewej stronie osi x.
right	Umieść pozycję tła na prawej stronie osi x.
center	Umieść pozycję tła na środku osi x.
x%	Lewa strona osi x wynosi 0%, a prawa 100% Procentowa wartość oznacza szerokość obszaru umieszczenia tła minus szerokość obrazu tła.
xpos	Jest to dystans od lewej strony poziomo. Jednostką może być piksel (np. 0px) lub inna Jednostki CSS.
xpos offset	Dwuwartościowy语法, obsługiwany tylko w Firefox i Safari. xpos Ustaw na left lub right offset Jest to poziomy dystans od lewej lub prawej strony obrazu tła w stosunku do ustawienia xpos Jednostką może być piksel lub inna Jednostki CSS.
initial	Ustaw ten atrybut na jego wartość domyślną. Zobacz: initial.
inherit	Inhereduje ten atrybut od elementu nadrzędnego. Zobacz: inherit.

Szczegóły techniczne

Domyślna wartość:	0%
Inheredność:	Nie
Tworzenie animacji:	Obsługiwane. Zobacz:Atrybuty związane z animacją.
Wersja:	CSS3
Gramatyka JavaScript:	object.style.backgroundPositionX="center"