Kurs HTML

Wprowadzenie: Gdzie umieścić tło?

Gdy używamy obrazu tła (background-image), zwłaszcza jeśli nie jest on powtarzany (background-repeat: no-repeat;) lub jest większy niż element, często chcemy kontrolować jego dokładne położenie wewnątrz elementu.

Właściwość background-position pozwala określić **punkt początkowy** (origin point) dla obrazu tła względem obszaru pozycjonowania tła (domyślnie jest to lewy górny róg obszaru padding-box, ale można to zmienić za pomocą background-origin).

Domyślną wartością dla background-position jest 0% 0% lub left top, co oznacza, że lewy górny róg obrazu tła pokrywa się z lewym górnym rogiem obszaru pozycjonowania tła.

Wartości background-position

Właściwość background-position może przyjmować jedną lub dwie wartości, które określają pozycję w poziomie (oś X) i pionie (oś Y).

Słowa kluczowe (Keywords)

Można używać słów kluczowych do określenia pozycji:

• Oś X: left, center, right
• Oś Y: top, center, bottom

Można podać:

• Jedno słowo kluczowe: Jeśli podasz tylko jedno słowo (np. center), druga wartość domyślnie przyjmie center. Czyli background-position: center; jest równoważne center center. Jeśli podasz top, bottom, left lub right, druga wartość domyślnie będzie center (np. background-position: top; to center top).
• Dwa słowa kluczowe: Można podać dwa słowa, jedno dla osi X, drugie dla osi Y, w dowolnej kolejności (przeglądarka sama rozpozna, które jest które). Np. right top, bottom left, center bottom.

.bg-center {
  background-position: center; /* center center */
}
.bg-top-right {
  background-position: top right; /* lub right top */
}
.bg-bottom-left {
  background-position: bottom left; /* lub left bottom */
}
.bg-left-center {
    background-position: left; /* left center */
}
.bg-center-bottom {
    background-position: bottom; /* center bottom */
}Kopiuj

Wartości procentowe (%)

Można podać jedną lub dwie wartości procentowe. Pierwsza odnosi się do osi X, druga do osi Y.

• background-position: 50% 50%; jest równoważne center center.
• background-position: 0% 0%; jest równoważne left top.
• background-position: 100% 100%; jest równoważne right bottom.
• background-position: 25% 75%; umieści punkt obrazu znajdujący się w 25% jego szerokości i 75% jego wysokości w punkcie kontenera znajdującym się w 25% jego szerokości i 75% jego wysokości.

Kluczowe jest zrozumienie, że wartość procentowa X% Y% oznacza: "wyrównaj punkt obrazu znajdujący się w X% jego szerokości i Y% jego wysokości z punktem obszaru pozycjonowania tła znajdującym się w X% jego szerokości i Y% jego wysokości".

.bg-percent-center {
  background-position: 50% 50%; /* Wycentrowanie */
}
.bg-percent-top-right {
  background-position: 100% 0%; /* Prawy górny róg */
}
.bg-percent-custom {
  background-position: 10% 90%; /* Lekko od lewej, blisko dołu */
}Kopiuj

Wartości długości (px, em, etc.)

Można podać jedną lub dwie wartości długości. Określają one **odległość lewego górnego rogu obrazu tła od lewego górnego rogu obszaru pozycjonowania tła**.

• background-position: 10px 20px; przesuwa lewy górny róg obrazu o 10px w prawo i 20px w dół od lewego górnego rogu kontenera.
• background-position: 0px 0px; to domyślne położenie (lewy górny róg).
• Można używać wartości ujemnych, aby przesunąć obraz częściowo poza kontener.

Jeśli podasz tylko jedną wartość długości, druga domyślnie przyjmie 50% (center).

.bg-pixels-offset {
  background-position: 30px 15px; /* Przesunięcie o 30px w prawo, 15px w dół */
}
.bg-pixels-right-bottom-offset {
  /* Można też połączyć z krawędziami, np. 10px od prawej, 5px od dołu */
  background-position: right 10px bottom 5px; 
}Kopiuj

Mieszanie wartości

Można mieszać słowa kluczowe z wartościami procentowymi lub długościami (np. center 20px, left 50%, right 10px top 5px).

Pozycjonowanie względem krawędzi ( składnia 4 wartości)

Nowsza składnia pozwala precyzyjnie określić odległość od konkretnej krawędzi za pomocą 3 lub 4 wartości:

• background-position: right 20px bottom 10px; umieszcza obraz 20px od prawej krawędzi i 10px od dolnej krawędzi.
• background-position: left 5px top 15px; umieszcza obraz 5px od lewej i 15px od górnej krawędzi.

Ta składnia jest bardziej intuicyjna przy pozycjonowaniu względem innych krawędzi niż lewa górna.

Pozycjonowanie wielu obrazów tła

Jeśli używasz wielu obrazów tła, możesz podać wiele wartości dla background-position, oddzielonych przecinkami. Każda wartość odpowiada obrazowi na tej samej pozycji w background-image.

.multi-bg-positioned {
  background-image: url("icon1.png"), url("icon2.png");
  background-repeat: no-repeat; /* Ważne, aby pozycjonować pojedyncze obrazy */
  background-position: left top, right bottom; /* icon1 w lewym górnym, icon2 w prawym dolnym */
  /* Można też użyć bardziej złożonych wartości: */
  /* background-position: 10px 10px, center 90%; */
  border: 1px solid orange;
  height: 150px;
}Kopiuj