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)
- round - wymiary obrazka w tle zostaną dopasowane w taki sposób, aby żadna grafika nie była przycięta (CSS 3)
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
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.
Przykład {background-repeat}
Przeglądarki
 Chrome |  Firefox |  Edge |  Opera |  Safari | |
|---|---|---|---|---|---|
background-repeat | 1 2008-12-11 | 1 2004-11-09 | 12 2015-07-29 | 3.5 1998-11-18 | 1 2003-06-23 |
background-repeat no-repeat | 1 2008-12-11 | 1 2004-11-09 | 12 2015-07-29 | 15 2013-07-02 | 1 2003-06-23 |
background-repeat repeat | 1 2008-12-11 | 1 2004-11-09 | 12 2015-07-29 | 15 2013-07-02 | 1 2003-06-23 |
background-repeat repeat-x | 1 2008-12-11 | 1 2004-11-09 | 12 2015-07-29 | 15 2013-07-02 | 1 2003-06-23 |
background-repeat repeat-y | 1 2008-12-11 | 1 2004-11-09 | 12 2015-07-29 | 15 2013-07-02 | 1 2003-06-23 |
background-repeat round | 30 2013-10-01 | 49 2016-09-20 | 12 2015-07-29 | 17 2013-10-08 | 8 2014-10-16 |
background-repeat space | 30 2013-10-01 | 49 2016-09-20 | 12 2015-07-29 | 17 2013-10-08 | 8 2014-10-16 |
background-repeat backgrounds | 1 2008-12-11 | 3.6 2010-01-21 | 12 2015-07-29 | 10.5 2010-03-02 | 1.3 2005-04-15 |