Przejdź do treści

Tło - CSS

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 - Chrome Firefox Edge Opera Safari

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ć:
  • 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

Komentarze

Zobacz więcej komentarzy

Facebook