Atrybut background-position w CSS

Definicja i zastosowanie

background-position Właściwość ustawia pozycję startową obrazu tła.

Ta właściwość ustawia oryginalny obraz tła (od background-image Definicja lokalizacji pozycji tła, jeśli obraz tła ma się powtarzać, będzie to punkt początkowy.

Wskazówka:Musisz ustawić atrybut background-attachment na "ustalone", aby zapewnić prawidłowe działanie tej właściwości w Firefox i Opera.

Zobacz również:

Kurs CSS:Tło CSS

Podręcznik CSS:Atrybut background-image

Podręcznik HTML DOM:Atrybut backgroundPosition

Przykład

Jak umieścić obraz tła:

body
{ 
background-image:url('bgimage.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}

Spróbuj sam

Gramatyka CSS

background-position: value;

Wartość atrybutu

Wartość Opis
  • górny lewy
  • górny środek
  • górny prawy
  • środek lewy
  • środek środek
  • środek prawy
  • dolny lewy
  • dolny środek
  • dolny prawy

Jeśli określisz tylko jedną nazwę kluczową, druga wartość będzie wynosić "center".

Domyślna wartość: 0% 0%.
x% y%

Pierwsza wartość to pozycja pozioma, druga wartość to pozycja pionowa.

Górny lewy kąt to 0% 0%. Dolny prawy kąt to 100% 100%.

Jeśli określisz tylko jedną wartość, druga będzie wynosić 50%.
xpos ypos

Pierwsza wartość to pozycja pozioma, druga wartość to pozycja pionowa.

Górny lewy kąt to 0 0. Jednostki to piksele (0px 0px) lub inna jednostka CSS.

Jeśli określisz tylko jedną wartość, druga będzie wynosić 50%.

Możesz mieszać % i wartości position.

Szczegóły techniczne

Domyślna wartość: 0% 0%
Inheredność: nie
Wersja: CSS1
Język JavaScript: object.style.backgroundPosition="center"

Więcej przykładów

Jak używać % do umieszczania obrazu tła
Ten przykład pokazuje, jak używać procentów do umieszczania obrazu tła na stronie.
Jak używać pikseli do umieszczania obrazu tła
Ten przykład pokazuje, jak używać pikseli do umieszczania obrazu tła na stronie.

Wsparcie przeglądarek

Tabela zawiera wersje przeglądarek, które w pełni wspierają tę właściwość.

Chrome Edge Firefox Safari Opera
Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5