Pozycja tła

Dane w pigułce
Zastosowanie	ustawia grafikę tła w określonej pozycji
Dziedziczenie	nie
Wartości	x y, x% y%, left|center|right, top|center|bottom
Wartość domyślna	0% 0%
Przykład	background-image: url('obrazki/obrazek.gif'); background-position: center top;
Uwagi
Odpowiednik w HTML	brak

Aby zdefiniować pozycję tła, należy wpisać w definicji stylu background-position : wartość

Tło może mieć różną pozycję. Typowym przykładem jest tło strony, którym jest obrazek.

Przykład: tło na środku strony

W tym akurat przykładzie zdefiniowaliśmy tło jako pojedynczy obrazek na środku ekranu, czyli za pomocą polecenia

body {background: url(pcq.gif) fixed no-repeat center}

To było tzw. polecenie mieszane, natomiast składnia dla pozycji tła wygląda następująco:

background-position: wartość

W przykładowej tabeli (z jedną komórką) możemy wstawić grafikę jako tło, bez definiowania pozycji.

td style="background-image: url(../grafika/pcq.gif); background-repeat: no-repeat; height:150px;"

bez definiowania pozycji bez definiowania pozycji bez definiowania pozycji

Możemy jednak określić pozycję tła w pionie:

td style="background-image: url(../grafika/pcq.gif); background-position: top; background-repeat: no-repeat; height:150px;"

pozycja top pozycja top pozycja top pozycja top

td style="background-image: url(../grafika/pcq.gif); background-position: center; background-repeat: no-repeat; height:150px;"

pozycja center pozycja center pozycja center pozycja center

td style="background-image: url(../grafika/pcq.gif); background-position: bottom; background-repeat: no-repeat; height:150px;"

pozycja bottom pozycja bottom pozycja bottom pozycja bottom

W powyższych przykładach grafika ustawiała się domyślnie na środku, jeśli chodzi o położenie poziome. Możemy jednak definiować także jawnie wartości dla położenia poziomego:

td style="background-image: url(../grafika/pcq.gif); background-position: left; background-repeat: no-repeat; height:150px;"

pozycja left pozycja left pozycja left pozycja left

td style="background-image: url(../grafika/pcq.gif); background-position: center; background-repeat: no-repeat; height:150px;"

pozycja center pozycja center pozycja center pozycja center

td style="background-image: url(../grafika/pcq.gif); background-position: right; background-repeat: no-repeat; height:150px;"

pozycja right pozycja right pozycja right pozycja right

Zauważmy, że parametr center daje ten sam wynik w pionie i poziomie.

Możemy mieszać wartości pozycji pionowej i poziomej, na przykład top left czy bottom right:

td style="background-image: url(../grafika/pcq.gif); background-position: top right; background-repeat: no-repeat; height:150px;"

pozycja top right pozycja top right pozycja top right pozycja top right

td style="background-image: url(../grafika/pcq.gif); background-position: bottom left; background-repeat: no-repeat; height:150px;"

pozycja bottom left pozycja bottom left pozycja bottom left pozycja bottom left

Możliwe jest wreszcie podanie wartości liczbowych, np. background-position: 1cm 2cm, czyli 1 centymetr od lewego brzegu i 2cm od górnego.

td style="background-image: url(../grafika/pcq.gif); background-position: 1cm 2cm; background-repeat: no-repeat; height:150px;"

pozycja 1cm 2cm pozycja 1cm 2cm pozycja 1cm 2cm pozycja 1cm 2cm

td style="background-image: url(../grafika/pcq.gif); background-position: 20% 80%; background-repeat: no-repeat; height:150px;"

pozycja 20% 80% pozycja 20% 80% pozycja 20% 80% pozycja 20% 80%

Interpretacja: Internet Explorer, Mozilla, Opera