Kaskadowe arkusze stylów CSS: pozycja tła









Tematy: kolor | kolor tła | grafika jako tło | powtarzanie tła | zaczepienie tła
pozycja tła | mieszane atrybuty







Strona główna kursu
Style
Wstęp
Narzędzia
Budowa stylu
Selektory
Kaskadowość i dziedziczenie
Wstawianie stylów
Jednostki miary
Własności czcionek
Własności tekstu
Kolor i tło
Marginesy i odstępy
Obramowania
Wykazy
Tabele
Rozmiary
Pozycjonowanie
Wyświetlanie
Obrys
Własności drukowania
Zawartość generowana
Suwaki






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