Tło - CSS
Pozycja tła obrazkowego {background-position}
Jak ustawić obrazek (grafikę, zdjęcie) w tle w określonej pozycji?
Pozycja tła obrazkowego {background-position}
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ć:
Natomiast jako "pozycja" należy wpisać:
- 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
- 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 {background-position}
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 {background-position}
no-repeat; left top, right bottom