Przejdź do treści

Tło

Powtarzanie

selektor { background-repeat: powtarzanie }
Selektorem może być praktycznie dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów].

Natomiast jako "powtarzanie" należy wpisać:
  • repeat - powtarzanie tła w obu kierunkach (domyślnie)
  • repeat-x - powtarzanie tła tylko w kierunku poziomym
  • repeat-y - powtarzanie tła tylko w kierunku pionowym
  • no-repeat - brak powtarzania tła (zostanie wyświetlone jako pojedynczy obrazek)
  • space - przestrzeń pomiędzy obrazkami w tle zostanie dobrana w taki sposób, aby żadna grafika nie była przycięta (CSS 3 - MSIE 9, Opera)
  • round - wymiary obrazka w tle zostaną dopasowane w taki sposób, aby żadna grafika nie była przycięta (CSS 3 - MSIE 9, Opera)

Polecenie pozwala zdefiniować sposób powtarzania się obrazka w tle obrazkowym. Normalnie kopie obrazka są ustawiane obok siebie tak, że zajmują cały obszar tła. Ale możliwe jest również zdefiniowanie powtarzania w poziomie czy w pionie lub całkowite zablokowanie.

W CSS 3 wprowadzono dodatkowo możliwość oddzielnego określenia sposobu powtarzania tła w poziomie i w pionie. Na przykład "repeat no-repeat" jest równoznaczne z "repeat-x", a "no-repeat repeat" - "repeat-y". Taki rozszerzony sposób staje się bardziej przydatny w przypadku dodatkowych wartości - "space round" i "round space". Dzięki temu możemy precyzyjnie dopasować sposób powielania grafiki w poziomie i w pionie, w zależności od jej wymiarów w stosunku do wymiarów elementu, pod którym wstawiamy tło.

Polecenie to ma sens, tylko jeśli określimy równocześnie tło obrazkowe.

W przeglądarce Chrome 15 ustawienie trybów powtarzania dostępnych w CSS 3 jest równoznaczne z wartością "no-repeat"!

Przykład:

repeat
repeat-x
repeat-y
no-repeat
space
round
space round

Wielokrotne powtarzanie

(CSS 3 - interpretuje Internet Explorer 9, Firefox, Opera, Chrome)

selektor { background-repeat: powtarzanie obrazka 1, powtarzanie obrazka 2,... }

Jeżeli w tle wstawimy więcej niż jeden obrazek, możemy dla każdego z nich określić inny sposób powtarzania. Jeżeli pominiemy ustawienie sposobu powtarzania następnych obrazków, przejmą one ustawienia z pierwszego.

W MSIE 8 powyższy sposób jest zawsze równoznaczny z wartością "repeat"!

Przykład:

repeat-y, repeat-x

Komentarze

Zobacz więcej komentarzy