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
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.
Przykład {background-position}
no-repeat; left top, right bottom
Przeglądarki
 Chrome |  Firefox |  Edge |  Opera |  Safari | |
|---|---|---|---|---|---|
background-position: wartość | 1 2008-12-11 | 1 2004-11-09 | 12 2015-07-29 | 3.5 1998-11-18 | 1 2003-06-23 |
background-position: bottom | 1 2008-12-11 | 1 2004-11-09 | 79 2020-01-15 | 15 2013-07-02 | ≤13.1 2020-03-24 |
background-position: center | 1 2008-12-11 | 1 2004-11-09 | 79 2020-01-15 | 15 2013-07-02 | ≤13.1 2020-03-24 |
background-position: left | 1 2008-12-11 | 1 2004-11-09 | 79 2020-01-15 | 15 2013-07-02 | ≤13.1 2020-03-24 |
background-position: right | 1 2008-12-11 | 1 2004-11-09 | 79 2020-01-15 | 15 2013-07-02 | ≤13.1 2020-03-24 |
background-position: top | 1 2008-12-11 | 1 2004-11-09 | 79 2020-01-15 | 15 2013-07-02 | ≤13.1 2020-03-24 |
background-position: wartość /* multiple backgrounds */ | 1 2008-12-11 | 3.6 2010-01-21 | 12 2015-07-29 | 10.5 2010-03-02 | 1.3 2005-04-15 |