Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki
Tabele

Pozycja tła

Email Drukuj PDF

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

Dane w pigułce
Zastosowanieustawia grafikę tła w określonej pozycji
Dziedziczenienie
Wartościx y, x% y%, left|center|right, top|center|bottom
Wartość domyślna0% 0%
Przykładbackground-image: url('obrazki/obrazek.gif'); background-position: center top;
Uwagi
Odpowiednik w HTMLbrak

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(/images/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(/images/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, Firefox, Opera, Chrome

 

HTML5. Rusz głową.

HTML5. Rusz głową!

HTML5. Ćwiczenia praktyczne.

HTML5. Ćwiczenia praktyczne.

HTML5. Nieoficjalny podręcznik.

HTML5. Nieoficjalny podręcznik

Nowości Helionu

Statystyki

Użytkowników : 3556
Artykułów : 513
Zakładki : 28
Odsłon : 19030963