Tło - CSS
Powtarzanie tła obrazkowego {background-repeat}
W jaki sposób zapobiec powielaniu grafiki wstawionej w tle albo powielić ją tylko w jednym kierunku (poziomo lub pionowo)?
Powtarzanie tła obrazkowego {background-repeat}
selektor { background-repeat: powtarzanie }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 {background-repeat}
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"!