Przykład
Powtórz obraz tła tylko w pionie:
body
{
background-image: url("paper.gif");
background-repeat: repeat-y;
}
Spróbuj sam " Więcej "Try it Yourself" przykłady poniżej.
Definicja i Wykorzystanie
Właściwość background-repeat określa, czy / jak obraz tła będzie powtarzany.
Domyślnie background-image jest powtarzany zarówno pionowo jak i poziomo.
Tip: Tło obrazu jest umieszczony w zależności od własności background-position. Jeśli nie background-position jest określony obraz jest zawsze umieszczony w lewym górnym rogu elementu.
| Domyślna wartość: | repeat |
|---|---|
| Dziedziczny: | no |
| Animatable: | no. Read about animatable |
| Wersja: | CSS1 |
| Składnia JavaScript: | object .style.backgroundRepeat="repeat-x" Try it |
Pomoc Browser
Liczby w tabeli określ pierwszą wersję przeglądarki, która w pełni obsługuje właściwość.
| Nieruchomość | |||||
|---|---|---|---|---|---|
| background-repeat | 1,0 | 4,0 | 1,0 | 1,0 | 3,5 |
Note: IE8, a wcześniej nie obsługuje wielu obrazów tła na jednym elemencie.
Składnia CSS
background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit;wartości nieruchomości
| Wartość | Opis | Graj |
|---|---|---|
| repeat | Obraz tła będzie powtarzany zarówno pionowo jak i poziomo. Jest to domyślny | Graj " |
| repeat-x | Obraz tła będzie powtarzany tylko w poziomie | Graj " |
| repeat-y | Obraz tła będzie powtarzany tylko w pionie | Graj " |
| no-repeat | Tło-image nie będzie powtarzany | Graj " |
| initial | Ustawia tę właściwość na wartość domyślną. Przeczytaj o początkowej | Graj " |
| inherit | Dziedziczy nieruchomość od swojego rodzica. Przeczytaj o dziedziczą |
Więcej przykładów
Przykład
Jak powtórzyć obraz tła w pionie i poziomie (domyślny dla obrazów tła):
body
{
background-image: url("paper.gif");
}
Spróbuj sam " Przykład
Powtórz obraz tła tylko w poziomie:
body
{
background-image: url("paper.gif");
background-repeat: repeat-x;
}
Spróbuj sam " Przykład
Wyświetla obraz tła tylko jeden raz, a no-repeat:
body
{
background-image: url("paper.gif");
background-repeat: no-repeat;
}
Spróbuj sam " Podobne strony
Kurs CSS: CSS Tło
Odniesienia CSS: Właściwość background-position
HTML DOM referencyjny: backgroundRepeat property