Przejdź do treści

Tło

Pozycja

selektor { background-position: pozycja }
Selektorem może być znacznik wyświetlany w bloku albo zastępowany [zobacz: Wstawianie stylów].

Natomiast jako "pozycja" należy wpisać:
  1. Jedną wartość:
    • center - obrazek na środku (w centrum)
    • left - obrazek po lewej
    • right - po prawej
    • top - na górze
    • bottom - na dole
    • jednostka długości - odległość od lewej krawędzi
  2. Dwie wartości (oddzielone spacją):
    • left top - lewy-górny róg
    • left bottom - lewy-dolny róg
    • right top - prawy-górny róg
    • right bottom - prawy-dolny róg
    • dwie jednostki długości, z których pierwsza oznacza odległość od lewej krawędzi, a druga - od górnej

Pozwala ustalić pozycję obrazka w tle.

Polecenie to ma sens, tylko jeśli określimy równocześnie tło obrazkowe oraz ograniczymy jego powtarzanie (no-repeat, repeat-x lub repeat-y).

Przykład:

repeat-x; center
repeat-y; center
no-repeat; center
no-repeat; top
no-repeat; right top
no-repeat; right
no-repeat; right bottom
no-repeat; bottom
no-repeat; left bottom
no-repeat; left
no-repeat; left top
no-repeat; 1cm
no-repeat; 25% 50%
no-repeat; 1cm 5mm

Wielokrotna pozycja

(CSS 3 - interpretuje Internet Explorer 9, Firefox, Opera, Chrome)

selektor { background-position: pozycja obrazka 1, pozycja obrazka 2,... }

Jeżeli w tle wstawimy więcej niż jeden obrazek, możemy dla każdego z nich określić inną pozycję. Jeżeli pominiemy pozycję następnych obrazków, przejmą one ustawienia z pierwszego.

W MSIE 8 powyższy sposób jest zawsze równoznaczny z wartością "left top"!

Przykład:

no-repeat; left top, right bottom

Zobacz także

Więcej tematów

Dotacje

Pomogła Ci ta strona? Chcesz, aby dalej się rozwijała?
Dotpay - Bezpieczne transakcje internetowePayPalWpłać dobrowolną dotację...