CSS-Eigenschaft background-repeat

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.

Standardmäßig wird das Bild in der linken oberen Ecke ohne die Eigenschaft background-position angezeigt.
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+


Finden Sie das nützlich?

Ähnliche Artikel