Die Eigenschaft background-repeatdefiniert, wie das Hintergrundbild wiederholt werden soll. Standardmäßig wird background-repeat sowohl horizontal als auch vertikal wiederholt. Wenn der Wert "repeat-x" eingestellt ist, wird das Bild nur horizontal wiederholt. Wenn der Wert "repeat-y" eingestellt ist, wird das Bild nur vertikal wiederholt. Es gibt noch zwei weitere Werte: "space" und "round". Mit "Space" wird das Bild ohne Beschneidung wiederholt und mit "round" wird das Bild lückenlos wiederholt.
Wir müssen die Eigenschaft background-repeat mit den Eigenschaften background-image und background-position verwenden.
| Anfangswert | repeat |
| Gilt für | Alle Elemente. Es gilt auch für ::first-letter and ::first-line. |
| Geerbt | Nein |
| Animierbar | Nein |
| Version | CSS1 |
| DOM Syntax | object.style.backgroundRepeat = "repeat-x"; |
Syntax
background-repeat: repeat | repeat-x | repeat-y | no-repeat | space | round | initial | inherit;Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
body {
background-image: url("/uploads/media/default/0001/02/668fdd72934232cdeff7a45a89be805113c916b5.jpeg");
background-repeat: repeat;
}
</style>
</head>
<body>
<h2>Das ist eine Überschrift für ein Beispiel. </h2>
<p>Ein Absatz zum Beispiel.</p>
</body>
</html>Im folgenden Beispiel wird background-image nicht wiederholt.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
body {
background-image: url("/uploads/media/default/0001/02/668fdd72934232cdeff7a45a89be805113c916b5.jpeg");
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h2>Das ist eine Überschrift für ein Beispiel. </h2>
<p>Ein Absatz zum Beispiel.</p>
</body>
</html>Ein weiteres Beispiel, wo der Wert "repeat-x" angewendet wird. Dadurch wird background-image nur horizontal wiederholt.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
body {
background-image: url("/uploads/media/default/0001/02/668fdd72934232cdeff7a45a89be805113c916b5.jpeg");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<h2>Das ist eine Überschrift für ein Beispiel. </h2>
<p>Ein Absatz zum Beispiel.</p>
</body>
</html>Versuchen wir nun ein Beispiel mit dem Wert "repeat-y". Dadurch wird das Bild nur vertikal wiederholt.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
body {
background-image: url("/uploads/media/default/0001/02/668fdd72934232cdeff7a45a89be805113c916b5.jpeg");
background-repeat: repeat-y;
}
</style>
</head>
<body>
<h2>Das ist eine Überschrift für ein Beispiel. </h2>
<p>Ein Absatz zum Beispiel.</p>
</body>
</html>Versuchen wir ein Beispiel, bei dem der Wert "space" angewendet wird. Hier wird background-image ohne Abschneiden wiederholt.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
body {
background-image: url("/uploads/media/default/0001/02/668fdd72934232cdeff7a45a89be805113c916b5.jpeg");
background-repeat: space;
}
</style>
</head>
<body>
<h2>Das ist eine Überschrift für ein Beispiel. </h2>
<p>Ein Absatz zum Beispiel.</p>
</body>
</html>Ein weiteres Beispiel mit dem Wert "round". Dadurch wird background-image lückenlos wiederholt.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
body {
background-image: url("/uploads/media/default/0001/02/668fdd72934232cdeff7a45a89be805113c916b5.jpeg");
background-repeat: round;
}
</style>
</head>
<body>
<h2>Das ist eine Überschrift für ein Beispiel. </h2>
<p>Ein Absatz zum Beispiel.</p>
</body>
</html>Werte
| Wert | Beschreibung |
|---|---|
| repeat | Das Hintergrundbild wird sowohl horizontal als auch vertikal wiederholt. Dies ist der Standardwert. |
| repeat-x | Das Hintergrundbild wird nur horizontal wiederholt. |
| repeat-y | Das Hintergrundbild wird nur vertikal wiederholt. |
| no-repeat | Das Hintergrundbild wird nicht wiederholt. |
| space | Das Hintergrundbild wird so oft wie möglich wiederholt, ohne zu beschneiden. |
| round | Das Hintergrundbild wird lückenlos wiederholt. |
| initial | Es setzt die Eigenschaft auf den Standardwert. |
| inherit | Es erzeugt die Eigenschaft von ihrem übergeordneten Element. |
Browser-Support
|
|
|
|
|---|---|---|---|
| 1.0+ | 1.0+ | 1.0+ | 3.5+ |
Übe dein Wissen
