Właściwość CSSKolory i tła
background-repeat
Decyduje, czy i jak obraz tła powtarza się, żeby wypełnić element.
- Wartość domyślna
repeat- Dziedziczona
- Nie
- Animowalna
- nie
- Dotyczy
- wszystkie elementy
- JavaScript
element.style.backgroundRepeat = "no-repeat"
Przykład
#CSS
.notebook {
background-image: linear-gradient(transparent 27px, rgba(167, 139, 250, 0.25) 28px);
background-size: 100% 28px;
background-repeat: repeat-y;
line-height: 28px;
}HTML przykładu
<p class="notebook" style="margin: 0; padding: 0 12px; line-height: 28px; background-image: linear-gradient(transparent 27px, rgba(167,139,250,.25) 28px); background-size: 100% 28px; background-repeat: repeat-y;">Notatki z lekcji:<br>1. Tło może być wzorem z gradientu.<br>2. Powtarza się w pionie jak linie w zeszycie.</p>Podgląd
Definicja i zastosowanie
#Domyślnie obraz tła mniejszy od elementu powtarza się w obu kierunkach jak kafelki. Właściwość background-repeat pozwala to wyłączyć (no-repeat) albo ograniczyć powtarzanie do jednej osi (repeat-x, repeat-y).
Wartości space i round powtarzają obraz bez ucinania ostatniego kafelka: space dodaje odstępy między kopiami, a round delikatnie skaluje obraz, żeby zmieściła się pełna liczba kopii.
Przy zdjęciach tła prawie zawsze ustawia się no-repeat, a powtarzanie zostawia do wzorów i tekstur.
Składnia
#Składnia
background-repeat: repeat | no-repeat | repeat-x | repeat-y | space | round;Wartości
#Wartości w praktyce
#repeat
Kafelki w obu kierunkach, ostatnie mogą być ucięte.
.demo { background-repeat: repeat; }no-repeat
Jedna kopia obrazu.
.demo { background-repeat: no-repeat; }repeat-x
Powtarzanie tylko w poziomie.
.demo { background-repeat: repeat-x; }space
Pełne kafelki z równymi odstępami między nimi.
.demo { background-repeat: space; }round
Kafelki lekko skalowane, żeby zmieściła się pełna ich liczba.
.demo { background-repeat: round; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Powtarzające się gradienty (
repeating-linear-gradient) dają wzory w paski bez żadnych plików graficznych. - Przy zdjęciach ustaw
no-repeat, inaczej na dużych ekranach zobaczysz kopie obrazu.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.