CSS-Property background-repeat
Die Eigenschaft background-repeat wird verwendet, um festzulegen, wie das Hintergrundbild wiederholt werden soll. Standardmäßig wird das Hintergrundbild sowohl horizontal als auch vertikal wiederholt. Wenn der Wert "repeat-x" gesetzt ist, wird das Bild nur horizontal wiederholt. Wenn der Wert "repeat-y" gesetzt ist, wird das Bild nur vertikal wiederholt. Es gibt zwei weitere Werte: "space" und "round". "Space" bewirkt, dass das Bild ohne Abschneiden wiederholt wird, und "round" bewirkt, dass das Bild ohne Lücken wiederholt wird.
Wir müssen die Eigenschaft background-repeat zusammen mit den Eigenschaften background-image und background-position verwenden.
INFO
Standardmäßig wird das Bild ohne die Eigenschaft background-position in der oberen linken Ecke angezeigt.
| 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-Eigenschaft background-repeat
background-repeat: repeat | repeat-x | repeat-y | no-repeat | space | round | initial | inherit;Beispiel für die Eigenschaft background-repeat:
Beispiel der CSS-Eigenschaft background-repeat mit dem Wert repeat
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-image: url("https://de.w3docs.com/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 nicht wiederholt.
Beispiel für die Eigenschaft background-repeat mit dem Wert "no-repeat":
Beispiel der CSS-Eigenschaft background-repeat mit dem Wert no-repeat
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-image: url("https://de.w3docs.com/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 für die Eigenschaft background-repeat mit dem Wert "repeat-x":
Beispiel der CSS-Eigenschaft background-repeat mit dem Wert repeat-x
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-image: url("https://de.w3docs.com/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 für die Eigenschaft background-repeat mit dem Wert "repeat-y":
Beispiel der CSS-Eigenschaft background-repeat mit dem Wert repeat-y
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-image: url("https://de.w3docs.com/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>Versuchen wir ein Beispiel, bei dem das Hintergrundbild ohne Abschneiden wiederholt wird.
Beispiel für die Eigenschaft background-repeat mit dem Wert "space":
Beispiel der CSS-Eigenschaft background-repeat mit dem Wert space
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-image: url("https://de.w3docs.com/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>Im folgenden Beispiel bewirkt der angewendete Wert, dass das Hintergrundbild ohne Lücken wiederholt wird.
Beispiel für die Eigenschaft background-repeat mit dem Wert "round":
Beispiel der CSS-Eigenschaft background-repeat mit dem Wert round
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-image: url("https://de.w3docs.com/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
| Value | Description | Play it |
|---|---|---|
| repeat | Das Hintergrundbild wird sowohl horizontal als auch vertikal wiederholt. Dies ist der Standardwert. | Play it » |
| repeat-x | Das Hintergrundbild wird nur horizontal wiederholt. | Play it » |
| repeat-y | Das Hintergrundbild wird nur vertikal wiederholt. | Play it » |
| no-repeat | Das Hintergrundbild wird nicht wiederholt. | Play it » |
| space | Das Hintergrundbild wird so oft wie möglich ohne Abschneiden wiederholt. | Play it » |
| round | Das Hintergrundbild wird ohne Lücken wiederholt. | Play it » |
| initial | Setzt die Eigenschaft auf ihren Standardwert. | Play it » |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |
Practice
What are the different values that can be specified for the 'background-repeat' property in CSS?