Właściwość powtarzania tła CSS

❮ Poprzedni Pełne odniesienie CSS Dalej _

Przykład

Powtórz obraz tła tylko w pionie:

body {
background-image: url("paper.gif");
background-repeat: repeat-y;
}

Więcej przykładów „Wypróbuj sam” poniżej.

Definicja i użycie

Właściwość background-repeatokreśla, czy/jak będzie powtarzany obraz tła.

Domyślnie obraz tła jest powtarzany zarówno w pionie, jak iw poziomie.

Wskazówka: obraz tła jest umieszczany zgodnie z właściwością background-position . Jeśli nie określono pozycji tła, obraz jest zawsze umieszczany w lewym górnym rogu elementu.

Domyślna wartość:	powtarzać
Dziedziczny:	nie
Animowalny:	nie. Przeczytaj o animacji
Wersja:	CSS1
Składnia JavaScript:	obiekt .style.backgroundRepeat="repeat-x"

Obsługa przeglądarki

Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.

Property
background-repeat	1.0	4.0	1.0	1.0	3.5

Uwaga: IE8 i wcześniejsze wersje nie obsługują wielu obrazów tła w jednym elemencie.

Składnia CSS

Wartości nieruchomości

Value	Description	Play it
repeat	The background image is repeated both vertically and horizontally. The last image will be clipped if it does not fit. This is default
repeat-x	The background image is repeated only horizontally
repeat-y	The background image is repeated only vertically
no-repeat	The background-image is not repeated. The image will only be shown once
space	The background-image is repeated as much as possible without clipping. The first and last image is pinned to either side of the element, and whitespace is distributed evenly between the images
round	The background-image is repeated and squished or stretched to fill the space (no gaps)
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

Więcej przykładów

Przykład

Powtórz obraz tła zarówno w pionie, jak iw poziomie (jest to ustawienie domyślne):

body {
background-image: url("paper.gif");
background-repeat: repeat;
}

Przykład

Powtarzaj obraz tła tylko w poziomie:

body {
background-image: url("paper.gif");
background-repeat: repeat-x;
}

Przykład

Nie powtarzaj obrazu tła. Obraz zostanie wyświetlony tylko raz:

body {
background-image: url("paper.gif");
background-repeat: no-repeat;
}

Przykład

Używając background-repeat: space i background-repeat: round:

#example2 {
border: 2px solid black;
padding: 25px;
  background: url("w3css.gif");
background-repeat: space;
}

#example3 {
  border: 1px solid black;
padding: 25px;
background: url("w3css.gif");
  background-repeat: round;
}

Przykład

Użyj różnych właściwości tła, aby utworzyć obraz „bohatera”:

.hero-image {
background-image: url("photographer.jpg"); /* The image used */
background-color: #cccccc; /* Used if the image is unavailable */
height: 500px; /* You must set a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}