background-repeat

Wenn eine background-image Eigenschaft angegeben ist, bestimmt die background-repeat Eigenschaft in CSS, ob (und wie) sie wiederholt wird.

html {
  background-image: url(logo.png);
  background-repeat: repeat-x; 
}

Werte

Die background-repeat Eigenschaft akzeptiert die folgenden Werte

/* Single value syntax */
background-repeat: repeat; /* Default value */
background-repeat: repeat-x;
background-repeat: repeat-y
background-repeat: no-repeat;
background-repeat: round;
background-repeat: space;

/* Two value syntax: <horizontal> | <vertical> */
background-repeat: repeat no-repeat;
background-repeat: round space;
background-repeat: repeat round;
background-repeat: no-repeat space;
background-repeat: round no-repeat;

/* Global values */
background-repeat: inherit;
background-repeat: initial;
background-repeat: revert;
background-repeat: revert-layer;
background-repeat: unset;

• repeat: Kachelt das Bild in beide Richtungen. Dies ist der Standardwert.
• repeat-x: Kachelt das Bild horizontal.
• repeat-y: Kachelt das Bild vertikal.
• no-repeat: Keine Kachelung; das Bild wird nur einmal angezeigt.
• round: Kachelt das Bild, ohne es jemals zu beschneiden, so oft, wie es passt, und dehnt die Breite oder Höhe des Bildes, falls erforderlich. Wenn also weniger als die halbe Bildbreite übrig ist, wird es gedehnt, wenn es mehr ist, wird es gedehnt.
• space: Kachelt das Bild, ohne es jemals zu beschneiden, so oft, wie es passt, mit gleichmäßigen Abständen zwischen jeder Kachel.

Syntax

background-repeat: repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2};

• Anfangswert: repeat
• Anwendbar auf: Alle Elemente
• Vererbt: Nein
• Prozentangaben: N/A
• Berechneter Wert: Liste, jeder Eintrag ein Paar von Schlüsselwörtern, eines pro Dimension
• Animationstyp: Diskret

Die Eigenschaft background-repeat akzeptiert einen oder zwei Werte. Ein einzelner Wert setzt das Wiederholungsmuster des Hintergrundbilds sowohl in horizontaler als auch in vertikaler Richtung. Zwei Werte setzen einzeln das Wiederholungsmuster in jeder Richtung.

Einzelner Wert	Das Gleiche wie…
repeat-x	repeat no-repeat
repeat-y	no-repeat repeat
repeat	repeat repeat
space	space space
round	round round
no-repeat	no-repeat no-repeat

Die background Kurzschrifteigenschaft

Die Eigenschaft background-repeat ist ein Bestandteil der background Kurzschrifteigenschaft. Sie folgt der background-size in der Reihenfolge der Operationen

body {
  background:
     url(sweettexture.jpg)     /* background-image */
     top center / 100px 100px  /* background-bposition / background-size */
     no-repeat                 /* background-repeat */
     fixed                     /* background-attachment */
     padding-box               /* background-origin */
     content-box               /* background-clip */
     red;                      /* background-color */
}

Mehrere Hintergründe

Sie können auch mehrere Werte durch Kommas trennen, wenn Sie mit mehreren Hintergründen arbeiten. Nehmen wir an, wir haben ein Element mit zwei Hintergrundbildern

.some-element {
  background-image: url("star-outline.svg"), url("star-filled.svg");
}

Wir können das background-repeat Verhalten für jedes einzelne in derselben Deklaration festlegen, solange wir sie mit Kommas trennen

.some-element {
  background-image: url("star-outline.svg"), url("star-filled.svg");
  background-repeat: no-repeat, repeat-x;
}

Ohne das Komma wird CSS einfach denken, dass Sie die Einzelwert-Syntax verwenden und die vertikalen und horizontalen Richtungen für beide Hintergrundbilder festlegen.

Und ja, wir können tatsächlich die Zwei-Wert-Syntax durch Kommas trennen

.some-element {
  background-image: url("star-outline.svg"), url("star-filled.svg");
  background-repeat: no-repeat repeat-x, no-repeat repeat-y;
}

Mit anderen Worten, es gibt viele, viele Möglichkeiten, wie Hintergrundbilder mit beliebig vielen Hintergrundbildern wiederholt werden können.

Demo

Vergleichen Sie die Wiederholungsmuster für jeden Eigenschaftswert – und Kombinationen davon – mit den Steuerelementen in der folgenden Demo.

Die Unterschiede zwischen repeat, round und space sind deutlicher zu erkennen, wenn Sie das Element, das das Hintergrundbild enthält, in der Größe ändern können. Aktualisieren Sie die Größe jedes Beispiels in der folgenden Demo, um die verschiedenen Verhaltensweisen zu vergleichen.

Der Wert round ist äußerst hilfreich in den ziemlich seltenen Fällen, in denen Sie das gesamte Hintergrundbild für jede Wiederholung anzeigen müssen, ohne es zu beschneiden oder zu verändern. Die folgende Demo verwendet ein Hintergrundbild, um einen Rahmen um ein Element zu bilden, wobei background-repreat: round verwendet wird, um zu verhindern, dass der Rahmen das Bild abschneidet, wie es bei der Standard-repeat-Verhalten der Fall wäre.

Versuchen Sie, die Größe des Kastens anzupassen, um zu sehen, wie round das vollständige Bild anzeigt, unabhängig von der Größe des Kastens.

Oder, hey, vielleicht haben Sie Hamburger im Sinn und entscheiden sich für eine round-Wiederholung, um einen Stapel vollständiger Pattys zu erstellen. Ändern Sie die vertikale Größe der folgenden Demo, um einen größeren Burger zu erhalten.

Hier ist eine weitere lustige Demo mit Hamburgern, die background-repeat: round; demonstriert.

Browser-Unterstützung

Die Eigenschaft background-repeat wird überall unterstützt und war es auch immer, außer im integrierten Browser von Android, der zwischen den Versionen 2.1 bis 4.3 keine Unterstützung hatte.

IE	Edge	Chrome	Firefox	Safari	Opera
Alle	Alle	Alle	Alle	Alle	Alle

iOS	Chrome Android	Firefox Android	Android Browser	Opera Mobil	Android Browser
Alle	Alle	Alle	Alle	Alle	4.4+

round und space Werte

Die Werte round und space hatten nicht immer eine vollständige Browserunterstützung wie repeat, no-repeat, repeat-x und repeat-y. Aber sie werden heute überall solide unterstützt!

Mehrere Hintergründe

IE	Edge	Chrome	Firefox	Safari	Opera
9+	Alle	Alle	3.6+	Alle	11.5+

iOS Safari	Chrome Android	Firefox Android	Android Browser	Opera Mobile
Alle	Alle	Alle	90+	62+

Verwandte Tutorials

Verwandte Eigenschaften