CSS background-repeat Eigenschaft
Die background-repeat CSS-Eigenschaft legt fest, wie ein Hintergrundbild wiederholt wird. Werte und Beispiele im Überblick.
Die background-repeat-Eigenschaft steuert, wie ein Hintergrundbild innerhalb des Darstellungsbereichs eines Elements gekachelt wird. Standardmäßig ist ein Hintergrundbild zu klein, um das gesamte Element abzudecken, sodass der Browser es wie Tapete — auf beiden Achsen — wiederholt, bis der Bereich gefüllt ist.
Diese Seite behandelt jeden Wert von background-repeat, wann man welchen verwenden sollte, und den feinen Unterschied zwischen space und round (die zwei Werte, die am häufigsten verwechselt werden).
Die Werte lassen sich in drei Gruppen einteilen:
- Kacheln oder nicht:
repeat(der Standard) kachelt in beide Richtungen;no-repeatzeigt das Bild nur einmal. - Eine Achse kacheln:
repeat-xkachelt nur horizontal;repeat-ykachelt nur vertikal. - Kacheln ohne unvollständige Kacheln:
spacehält jede Kachel vollständig und verteilt den verbleibenden Platz als Lücken zwischen ihnen;roundstreckt oder verkleinert die Kacheln, sodass eine ganzzahlige Anzahl ohne Lücken hineinpasst.
background-repeat funktioniert zusammen mit background-image (das das Bild liefert) und background-position (das den Startpunkt der Kachelung festlegt). Es ist außerdem einer der Werte, die mit der background-Kurzschreibweise gesetzt werden können.
Wann sollte ich es verwenden?
no-repeatist in modernen Layouts am gebräuchlichsten — ein einzelnes Hero-Foto, Logo oder Symbol, das dann mitbackground-sizeskaliert und mitbackground-positionpositioniert wird.repeateignet sich ideal für nahtlose Texturen und Muster (Papierstruktur, Rauschen, Punktgitter), bei denen das Element vollständig gefüllt werden soll.repeat-x/repeat-ypassen für dekorative Streifen: einen sich wiederholenden oberen Rand, einen vertikalen Trenner oder einen Verlauf, der entlang einer Achse gekachelt werden soll.space/roundsind wichtig, wenn das Bild klare Ränder hat (wie Kacheln oder Miniaturbilder) und nicht abgeschnitten werden soll, wenn der Boxrand in der Mitte einer Kachel liegt.
By default, the image will be displayed in the top left corner without background-position property.
| Initial Value | repeat |
|---|---|
| Applies to | All elements. It also applies to ::first-letter and ::first-line. |
| Inherited | No. |
| Animatable | No. |
| Version | CSS1 |
| DOM Syntax | element.style.backgroundRepeat = "repeat-x"; |
Syntax
Syntax der CSS background-repeat Eigenschaft
background-repeat: repeat | repeat-x | repeat-y | no-repeat | space | round | initial | inherit;Beispiel der background-repeat Eigenschaft:
Beispiel der CSS background-repeat Eigenschaft mit dem Wert repeat
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-image: url("/uploads/media/default/0001/02/668fdd72934232cdeff7a45a89be805113c916b5.jpeg");
background-repeat: repeat;
}
</style>
</head>
<body>
<h2>This is some heading for an example.</h2>
<p>Some paragraph for an example.</p>
</body>
</html>Ergebnis
Im folgenden Beispiel wird das Hintergrundbild nur einmal angezeigt, da no-repeat gesetzt ist.
Beispiel der background-repeat Eigenschaft mit dem Wert "no-repeat":
Beispiel der CSS background-repeat Eigenschaft mit dem Wert no-repeat
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-image: url("/uploads/media/default/0001/02/668fdd72934232cdeff7a45a89be805113c916b5.jpeg");
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h2>This is some heading for an example.</h2>
<p>Some paragraph for an example.</p>
</body>
</html>Im nächsten Beispiel wird das Hintergrundbild nur horizontal wiederholt.
Beispiel der background-repeat Eigenschaft mit dem Wert "repeat-x":
Beispiel der CSS background-repeat Eigenschaft mit dem Wert repeat-x
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-image: url("/uploads/media/default/0001/02/668fdd72934232cdeff7a45a89be805113c916b5.jpeg");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<h2>This is some heading for an example.</h2>
<p>Some paragraph for an example.</p>
</body>
</html>Hier bewirkt der Wert "repeat-y", dass das Bild nur vertikal wiederholt wird.
Beispiel der background-repeat Eigenschaft mit dem Wert "repeat-y":
Beispiel der CSS background-repeat Eigenschaft mit dem Wert repeat-y
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-image: url("/uploads/media/default/0001/02/668fdd72934232cdeff7a45a89be805113c916b5.jpeg");
background-repeat: repeat-y;
}
</style>
</head>
<body>
<h2>This is some heading for an example.</h2>
<p>Some paragraph for an example.</p>
</body>
</html>Mit space behält das Bild seine ursprüngliche Größe — der Browser passt so viele vollständige Kacheln wie möglich ein und verteilt den verbleibenden Platz als gleichmäßige Lücken zwischen ihnen, sodass keine Kachel abgeschnitten wird.
Beispiel der background-repeat Eigenschaft mit dem Wert "space":
Beispiel der CSS background-repeat Eigenschaft mit dem Wert space
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-image: url("/uploads/media/default/0001/02/668fdd72934232cdeff7a45a89be805113c916b5.jpeg");
background-repeat: space;
}
</style>
</head>
<body>
<h2>This is some heading for an example.</h2>
<p>Some paragraph for an example.</p>
</body>
</html>Mit round gibt es überhaupt keine Lücken: Der Browser skaliert das Bild nach oben oder unten, sodass eine ganzzahlige Anzahl von Kacheln den Bereich exakt ausfüllt. Dadurch kann das Bild leicht verzerrt werden — das ist der Kompromiss, den round eingeht, um Lücken zu vermeiden.
Beispiel der background-repeat Eigenschaft mit dem Wert "round":
Beispiel der CSS background-repeat Eigenschaft mit dem Wert round
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-image: url("/uploads/media/default/0001/02/668fdd72934232cdeff7a45a89be805113c916b5.jpeg");
background-repeat: round;
}
</style>
</head>
<body>
<h2>This is some heading for an example.</h2>
<p>Some paragraph for an example.</p>
</body>
</html>Werte
| Wert | Beschreibung | Ausprobieren |
|---|---|---|
| repeat | Das Hintergrundbild wird sowohl horizontal als auch vertikal wiederholt. Dies ist der Standardwert. | Ausprobieren » |
| repeat-x | Das Hintergrundbild wird nur horizontal wiederholt. | Ausprobieren » |
| repeat-y | Das Hintergrundbild wird nur vertikal wiederholt. | Ausprobieren » |
| no-repeat | Das Hintergrundbild wird nicht wiederholt. | Ausprobieren » |
| space | Das Bild wird so oft wie möglich ohne Beschneidung wiederholt; der verbleibende Platz wird als gleichmäßige Lücken zwischen den Kacheln verteilt (die erste und letzte Kachel berühren die Ränder). | Ausprobieren » |
| round | Das Bild wird so skaliert, dass eine ganzzahlige Anzahl von Kacheln den Bereich ohne Lücken füllt; Kacheln werden gestreckt oder gestaucht, um zu passen. | Ausprobieren » |
| initial | Setzt die Eigenschaft auf ihren Standardwert. | Ausprobieren » |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |
Häufige Fallstricke
spaceundroundsind echte Werte. Beide sind Teil des Standards und kacheln ohne unvollständige Kacheln —spacefügt Lücken hinzu,roundskaliert das Bild um.no-repeatändert die Bildgröße nicht. Um ein einzelnes Bild die gesamte Box abdecken zu lassen, kombiniert manno-repeatmit background-size.- Position legt fest, wo das Kacheln beginnt. Bei Wiederholung verschiebt
background-positiondas gesamte Kachelraster, sodass zwei Kachelungen mit demselben Bild unterschiedlich aussehen können — background-position sollte bewusst gesetzt werden. - Auch die Zwei-Wert-Syntax existiert. Man kann ein Schlüsselwort pro Achse angeben, z. B. ist
background-repeat: repeat-x;gleichwertig mitbackground-repeat: repeat no-repeat;.