Własność CSS background-origin

Własność CSS background-origin określa obszar elementu, względem którego jest pozycjonowany początek obrazu ustawionego w jego tle.

W modelu polowym CSS wyróżnione są trzy obszary zawartości elementu: obszar obramowania, obszar dopełnienia i obszar treści. Własność background-origin pozwala wybrać, w którym z tych obszarów ma być umieszczony obraz tła elementu.

Wartości i składnia

Własność background-origin jako wartość przyjmuje jedno z poniższych słów kluczowych:

border-box

Ta wartość powoduje, że obraz w tle jest pozycjonowany względem pola obramowania elementu, a dokładnie mówiąc, względem krawędzi zewnętrznej tego obszaru, np.:

border: 5px dashed lightpink;
background-origin: border-box;
padding: 20px;

Przykładowy efekt:

padding-box

Ta wartość powoduje, że obraz w tle jest pozycjonowany względem pola dopełnienia elementu, a dokładnie mówiąc względem krawędzi zewnętrznej tego obszaru, np.:

border: 5px dashed lightpink;
background-origin: padding-box;
padding: 20px;

Przykładowy efekt:

Lewy górny róg obrazu tła pokrywa się z lewym górnym rogiem krawędzi zewnętrznej obszaru dopełnia, które zaczyna się dokładnie w tym miejscu, w którym kończy się obramowanie.

Sposób działania tego ustawienia jest zależny od tego, jak ustawiona jest własność background-position. W powyższym przykładzie jest ona niezdefiniowana, a więc ma domyślną wartość 0% 0%, która oznacza lewy górny róg.

Jeśli zmienimy jej ustawienie na right bottom (100% 100%), to obraz tła będzie pozycjonowany w odniesieniu do prawego dolnego rogu elementu:

border: 5px dashed lightpink;
background-origin: padding-box;
background-position: right bottom;
padding: 20px;

Efekt:

content-box

border: 5px dashed lightpink;
background-origin: content-box;
padding: 20px;

Efekt:

W przypadku tego ustawienia na położenie obrazu tła ma wpływ szerokość dopełnienia. Im jest ono większe, tym dalej przesunięty jest obraz w tle, ponieważ jest on wyrównany z początkiem obszaru treści przesuwanego przez dopełnienie.

Zastosowanie

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

Podsumowanie