Kurs HTML

Wprowadzenie: Względem czego pozycjonujemy tło?

W lekcji o background-position nauczyliśmy się, jak ustawiać pozycję obrazu tła. Właściwość background-position określa położenie obrazu względem pewnego **obszaru odniesienia** wewnątrz elementu.

Właściwość background-origin pozwala zdefiniować, **który obszar pudełka elementu** (box model) ma być tym obszarem odniesienia dla pozycjonowania tła.

Domyślnie, background-position jest liczona względem **padding-box**, czyli obszaru obejmującego zawartość (content) i wypełnienie (padding).

Wartości background-origin

Właściwość background-origin przyjmuje trzy główne wartości, odpowiadające obszarom modelu pudełkowego:

• padding-box: (Domyślne) Pozycja tła (background-position) jest liczona względem lewego górnego rogu obszaru obejmującego zawartość i wypełnienie. Obraz tła zaczyna się na krawędzi paddingu.
• border-box: Pozycja tła jest liczona względem lewego górnego rogu obszaru obejmującego zawartość, wypełnienie **oraz obramowanie**. Obraz tła zaczyna się na zewnętrznej krawędzi obramowania (pod nim).
• content-box: Pozycja tła jest liczona względem lewego górnego rogu obszaru **tylko zawartości** (content). Obraz tła zaczyna się na wewnętrznej krawędzi paddingu.

<div class="box origin-example padding-box-example">padding-box (domyślne)</div>
<div class="box origin-example border-box-example">border-box</div>
<div class="box origin-example content-box-example">content-box</div>

.origin-example {
  width: 150px;
  height: 100px;
  padding: 20px;
  border: 10px dashed red; /* Grube, przerywane obramowanie dla widoczności */
  margin-bottom: 15px;
  background-image: url("icon.png"); /* Mała ikona */
  background-repeat: no-repeat;
  background-color: lightyellow;
  /* Ustawiamy pozycję na lewy górny róg obszaru odniesienia */
  background-position: left top; /* lub 0% 0% */
}

.padding-box-example {
  background-origin: padding-box; 
  /* Ikona zaczyna się na krawędzi paddingu (wewnątrz obramowania) */
}

.border-box-example {
  background-origin: border-box;
  /* Ikona zaczyna się na krawędzi obramowania (pod nim) */
}

.content-box-example {
  background-origin: content-box;
  /* Ikona zaczyna się na krawędzi obszaru content (wewnątrz paddingu) */
}

W powyższym przykładzie, mimo że wszystkie trzy pudełka mają background-position: left top;, ikona tła pojawi się w nieco innym miejscu w każdym z nich, ponieważ punkt (0,0), względem którego jest pozycjonowana, znajduje się gdzie indziej:

• padding-box: Ikona w lewym górnym rogu, tuż przy wewnętrznej krawędzi czerwonego obramowania.
• border-box: Ikona w lewym górnym rogu, pod czerwonym obramowaniem (jej lewy górny róg pokrywa się z lewym górnym rogiem obramowania).
• content-box: Ikona w lewym górnym rogu obszaru treści, czyli przesunięta o szerokość paddingu (20px w prawo i 20px w dół) względem wewnętrznej krawędzi obramowania.

Interakcja z background-clip

Właściwość background-origin jest ściśle powiązana z background-clip (którą omówimy w następnej lekcji). background-origin określa, **gdzie zaczyna się** pozycjonowanie obrazu tła, podczas gdy background-clip określa, **do jakiego obszaru** tło (kolor lub obraz) jest rysowane (przycinane).

Domyślnie background-clip jest ustawione na border-box (tło rysowane jest pod obramowaniem), a background-origin na padding-box.

Pochodzenie wielu obrazów tła

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

.multi-bg-origin {
  background-image: url("icon1.png"), url("icon2.png");
  background-repeat: no-repeat;
  background-position: top left, bottom right;
  background-origin: border-box, content-box; /* icon1 względem border-box, icon2 względem content-box */
  border: 10px solid rgba(0,0,255,0.5);
  padding: 30px;
  height: 150px;
}