Własność CSS background-position

Własność CSS background-position określa położenie obrazu tła elementu. Jest ono ustalane w odniesieniu do ram wyznaczonych przez własność background-origin.

Wartości i składnia

Własność CSS background-position przyjmuje jedną, dwie, trzy lub cztery wartości, którymi mogą być słowa kluczowe top, right, bottom, left i center, liczby z jednostką długości oraz wartości procentowe.

Wartości własności background-position określają współrzędne x i y położenia obrazu tła elementu względem krawędzi tego elementu, a ich dokładny sposób interpretacji zależy od ich liczby i typu.

Jedna wartość

Jeśli podana jest tylko jedna wartość, to drugiej automatycznie nadawana jest wartość center, w przypadku słów kluczowych, lub 50%, w przypadku wartości liczbowych (i ta wartość 50% odnosi się do osi pionowej).

W przypadku słów kluczowych top (góra), right (prawa), bottom (dół), left (lewa) oznacza to, że obraz zawsze zostanie ustawiony na środku krawędzi wskazanej przez dane słowo. Natomiast w przypadku słowa kluczowego center obraz zostanie ustawiony na środku obszaru tła elementu zarówno w pionie, jak i w poziomie, np.:

background-position: top; /* To samo, co top center */

Ta deklaracja ustawia obraz tła na środku górnej krawędzi elementu:

Natomiast poniższa deklaracja przeniesie obraz w tle na środek prawej krawędzi elementu:

background-position: right; /* To samo, co right center */

Efekt:

Jeśli zostanie podana tylko jedna wartość z jednostką długości lub wartość procentowa, to określa ona odległość obrazu tła od lewej krawędzi elementu, a drugiej współrzędnej zostaje automatycznie nadana wartość 50%, która jest równoważna ze słowem kluczowym center i określa położenie względem górnej krawędzi elementu, np.:

background-position: 50px; /* To samo, co 50px 50% */

Efekt:

Dwie wartości

Jeśli podane są dwa słowa kluczowe ze zbioru top, right, bottom i left, to powodują one umieszczenie obrazu tła w odpowiednim rogu elementu, np.:

background-position: top left; /* Lewy górny róg */
background-position: bottom right; /* Prawy dolny róg */

Oczywiście słowa kluczowe odnoszące się do osi poziomej (left i right) łączą się tylko ze słowami kluczowymi odnoszącymi się do osi pionowej (top i bottom) oraz ze słowem kluczowym center i odwrotnie. To znaczy, że wartości top bottom i left right są niepoprawne.

Ponadto kolejność słów kluczowych nie ma znaczenia, ponieważ oznaczają one bezpośrednio to, której krawędzi dotyczą, więc nie ma ryzyka błędnej interpretacji. Wszystkie poniższe deklaracje są poprawne:

background-position: top left;
background-position: left top;
background-position: top center;
background-position: center top;
background-position: bottom center;
background-position: center bottom;

Jeśli podane jest jedno słowo kluczowe i jedna wartość liczbowa, to sposób interpretacji wartości liczbowej zależy od użytego słowa kluczowego. Jeżeli jest nim top lub bottom, to wartość ta określa położenie obrazu w poziomie, a jeżeli jest nim left lub right, to wartość liczbowa określa położenie obrazu w pionie, np.:

background-position: 50px top;

Efekt:

Jeśli podane są dwie wartości liczbowe, to pierwsza oznacza odległość od lewej, a druga – od górnej krawędzi elementu, np.:

background-position: 11em 70px;

Efekt:

Trzy lub cztery wartości

W tym rodzaju składni używane są kombinacje słów kluczowych i wartości liczbowych, a mówiąc dokładniej przed każdą wartością liczbową musi znajdować się słowo kluczowe określające, do której krawędzi ta wartość się odnosi, np.:

background-position: right 50px top 20px;

Ta deklaracja odsuwa obraz tła na odległość 50 pikseli od prawej krawędzi i 20 pikseli od górnej krawędzi. W tym przypadku kolejność par nie ma znaczenia, tzn. poniższa deklaracja też jest poprawna i równoznaczna z poprzednią:

background-position: top 20px right 50px;

W tej składni można pominąć jedną z wartości liczbowych i wówczas automatycznie jest w jej miejsce przyjmowana wartość domyślna 0. Na przykład wszystkie poniższe deklaracje są poprawne i mają dokładnie takie samo znaczenie:

background-position: top right 50px;
background-position: top 0 right 50px;
background-position: right 50px top;

Uwaga na temat wartości procentowych

Wartości procentowe własności background-position odnoszą się do szerokości i wysokości obszaru pozycjonowania tła w ten sposób, że punkt znajdujący się na górnej lub lewej krawędzi obrazu w określonej procentowo odległości od jej początku wypada na tej samej linii, co punkt znajdujący się na górnej lub lewej krawędzi obszaru pozycjonowania tła (dla uproszczenia powiedzmy, że elementu) w określonej takim samym procentem odległości od jej początku.

Choć może to brzmieć skomplikowanie, tak naprawdę jest bardzo proste. Wystarczy przeanalizować konkretny przykład. Powiedzmy, że mamy poniższą regułę CSS:

div {
  width: 400px;
  height: 200px;
  background-image: url(obraz.png);
  background-repeat: no-repeat;
  background-position: 40% 60%;
}

Zaczniemy od osi poziomej. Szerokość tego elementu, a więc długość jego górnej krawędzi, wynosi 400 pikseli. Obliczamy więc 40% z 400 i otrzymujemy 160. Czyli interesujący nas punkt na krawędzi górnej elementu znajduje się w odległości 160 pikseli od jej początku.

Obraz użyty w tym przykładzie ma wymiary 100 × 100 pikseli. Obliczamy więc 40% ze 100 i otrzymujemy 40. W związku z tym interesujący nas punkt na krawędzi górnej obrazu tła znajduje się w odległości 40 pikseli od jej początku.

Zatem punkt znajdujący się w odległości 40 pikseli od lewej krawędzi obrazu tła powinien znajdować się w odległości 160 pikseli od lewej krawędzi elementu.

Teraz przejdziemy do osi pionowej. Wysokość elementu, a więc długość jego lewej krawędzi, wynosi 200 pikseli. Obliczamy więc 60% z 200 i otrzymujemy 120 pikseli. Czyli interesujący nas punkt na krawędzi górnej elementu znajduje się w odległości 120 pikseli od jej początku.

Jak już wiemy, obraz ma wymiary 100 × 100 pikseli, więc obliczamy 60% ze 100 i otrzymujemy 60. W związku z tym interesujący nas punkt na lewej krawędzi obrazu tła znajduje się w odległości 60 pikseli od jej początku.

Zatem punkt znajdujący się w odległości 60 pikseli od górnej krawędzi obrazu tła powinien znajdować się w odległości 120 pikseli od górnej krawędzi elementu.

Spójrz na poniższy schemat, który wszystko wyjaśnia:

Ewentualnie można obliczyć pozycję lewego górnego rogu obrazu tła w obszarze pozycjonowania tła elementu wg następujących wzorów:

(szerokość elementu ? szerokość obrazu tła) × wartość procentowa poziomu
(wysokość elementu ? wysokość obrazu tła) × wartość procentowa pionu

W naszym przykładzie obliczenia te wyglądałyby tak:

(400 px ? 100 px) × 40% = 120 px
(200 px ? 100 px) × 60% = 60 px

Zatem lewy górny róg naszego elementu tła znajduje się w punkcie obszaru tła elementu o współrzędnych 120 × 60 pikseli. Inaczej mówiąc, powyższą deklarację z wartościami procentowymi moglibyśmy zastąpić tą deklaracją:

background-position: 120px 60px;

Zastosowanie

Własność CSS background-position ma zastosowanie do wszystkich elementów HTML.

Podsumowanie