Pozycja początkowa tła obrazkowego {background-origin}
W jaki sposób określić pozycję obrazka tła, względem której będą liczone wszelkie przesunięcia?
CSS 3
selektor { background-origin: początek }Selektorem może być praktycznie dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów].
Natomiast jako "początek" należy wpisać:
Natomiast jako "początek" należy wpisać:
- border-box - pozycja tła będzie liczona względem krawędzi obramowania [Zobacz: Model pudełkowy]
- padding-box - pozycja tła będzie liczona względem krawędzi marginesu wewnętrznego (domyślnie)
- content-box - pozycja tła będzie liczona względem krawędzi właściwej zawartości elementu
Zgodnie z komputerowym układem współrzędnych punkt zerowy znajduje się zawsze w lewym-górnym narożniku. W przypadku modelu pudełkowego możemy mieć jednak aż trzy takie narożniki - dla różnych obszarów wewnątrz elementu. Ustalenie położenia początkowego okazuje się szczególnie przydatne, jeśli korzystamy również z przycinania tła.
Możliwe jest również określenie kilku wartości pozycji początkowej - kiedy wstawiamy w tle więcej niż jeden obrazek:
selektor { background-origin: początek obrazka 1, początek obrazka 2,... }Przykład {background-origin}
no-repeat; left top; border-box
no-repeat; left top; padding-box
no-repeat; left top; content-box
Przeglądarki
 Chrome |  Firefox |  Edge |  Opera |  Safari | |
|---|---|---|---|---|---|
background-origin: wartość | 1 2008-12-11 | 4 2011-03-22 | 12 2015-07-29 | 10.5 2010-03-02 | 3 2007-10-26 |
background-origin: border-box | 1 2008-12-11 | 4 2011-03-22 | 12 2015-07-29 | 15 2013-07-02 | 3 2007-10-26 |
background-origin: content-box | 1 2008-12-11 | 4 2011-03-22 | 12 2015-07-29 | 10.5 2010-03-02 | 3 2007-10-26 |
background-origin: padding-box | 1 2008-12-11 | 4 2011-03-22 | 12 2015-07-29 | 15 2013-07-02 | 3 2007-10-26 |