background-repeat-x

Probieren Sie es aus

background-repeat-x: repeat;

background-repeat-x: space;

background-repeat-x: round;

background-repeat-x: no-repeat;

<section id="default-example">
  <div id="example-element"></div>
</section>

#example-element {
  background: #cccccc url("/https/developer.mozilla.org/shared-assets/images/examples/moon.jpg") no-repeat
    center / 120px;
  min-width: 100%;
  min-height: 100%;
}

Syntax

/* Keyword values */
background-repeat-x: repeat;
background-repeat-x: space;
background-repeat-x: round;
background-repeat-x: no-repeat;

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

Die Eigenschaft background-repeat-x wird als eine oder mehrere Werte angegeben, getrennt durch Kommas.

Werte

repeat

Der Standardwert. Das Bild wird so oft wie nötig wiederholt, um die gesamte Breite des Hintergrundbild-Malbereichs abzudecken. Das Randbild wird abgeschnitten, wenn mehrere Bilder nicht genau in die Hintergrundbreite passen.

no-repeat

Das Bild wird nicht wiederholt. Die Position des nicht wiederholten Hintergrundbildes wird durch die CSS Eigenschaft background-position definiert.

space

Das Bild wird so oft wie möglich ohne Abschneiden wiederholt. Die ersten und letzten Bilder sind am linken und rechten Rand des Elements fixiert, und der Leerraum wird gleichmäßig zwischen ihnen verteilt. Die Eigenschaft background-position-x wird ignoriert, es sei denn, ein oder mehrere Bilder können ohne Abschneiden angezeigt werden. Wenn das Bild breiter als das Element ist, wird es abgeschnitten, da nicht genügend Platz vorhanden ist, um es anzuzeigen.

round

Das Bild wird horizontal wiederholt. Wenn der verfügbare Platz wächst, werden die wiederholten Bilder gestreckt (ohne Lücken zu lassen), bis Platz für ein weiteres Bild vorhanden ist. Wenn mehrere Bilder nicht genau in den Hintergrund passen, werden sie skaliert, um zu passen.

Beschreibung

Die Eigenschaft background-repeat-x akzeptiert eine durch Kommas getrennte Liste von <repetition> Schlüsselbegriffen, die definieren, wie das/die Hintergrundbild/-er horizontal wiederholt werden soll/en oder gar nicht wiederholt werden soll/en.

Der Standardwert ist repeat. Mit diesem Wert wird das Hintergrundbild horizontal wiederholt, um die gesamte Breite des Hintergrundmalbereichs abzudecken, wobei Randbilder auf die Größe des Elements abgeschnitten werden. Ob die linken, rechten oder beide Ränder abgeschnitten werden, hängt vom Wert der entsprechenden background-position Eigenschaft ab. Wie oft Bilder wiederholt werden und wie stark die Bilder an den Rändern abgeschnitten werden, hängt von der Größe des Hintergrundmalbereichs und dem Breitenwert der entsprechenden background-size Eigenschaft ab.

Die wiederholten Bilder können gleichmäßig auseinandergesetzt werden, sodass die wiederholten Bilder in horizontaler Richtung nicht abgeschnitten werden. Mit dem space Wert, falls die Breite des Hintergrundmalbereichs kein Vielfaches der Bildbreite ist oder eine andere Größe hat, die ein Vielfaches des Hintergrundes in der Breitenrichtung ist, gibt es Bereiche, die nicht vom Hintergrundbild abgedeckt sind.

Alternativ kann das wiederholte Hintergrundbild gestreckt werden, um die gesamte Breite des Hintergrundbereichs ohne Abschneiden zu bedecken. Mit round wird das wiederholte Bild gestreckt, um den gesamten verfügbaren Platz zu füllen, bis Platz für ein zusätzliches wiederholtes Bild vorhanden ist.

Zum Beispiel, bei einem Hintergrundbild, das 100px x 100px groß ist, und einem Hintergrundmalbereich, der 1099px breit ist, wird das Bild auf 109,9px breite skaliert und 10 Mal in der horizontalen Richtung wiederholt. Dies wird das Seitenverhältnis aspect ratio des Bildes verändern und es verzerren. Wenn die Breite des Malbereichs um 1px auf 1100px zunimmt, wird ein elftes Bild horizontal passen, wobei jedes Bild mit 100px Breite gezeichnet wird und nicht mehr horizontal verzerrt ist.

Formale Definition

Formale Syntax

background-repeat-x = 
  <repetition>#  

<repetition> = 
  repeat     |
  space      |
  round      |
  no-repeat  

Beispiele

Festlegen von background-repeat-x

HTML

<ol>
  <li>
    no-repeat
    <div class="one"></div>
  </li>
  <li>
    repeat
    <div class="two"></div>
  </li>
  <li>
    space
    <div class="three"></div>
  </li>
  <li>
    round
    <div class="four"></div>
  </li>
</ol>

CSS

ol,
li {
  margin: 0;
  padding: 0;
}
li {
  margin-bottom: 12px;
}
div {
  background-image: url("star-solid.gif");
  width: 160px;
  height: 70px;
}

/* Background repeats */
.one {
  background-repeat-x: no-repeat;
}
.two {
  background-repeat-x: repeat;
}
.three {
  background-repeat-x: space;
}
.four {
  background-repeat-x: round;
}

@layer no-support {
  @supports not (background-repeat-x: repeat) {
    body::before {
      content: "Your browser doesn't support the `background-repeat-x` property.";
      background-color: wheat;
      display: block;
      padding: 1em;
      text-align: center;
    }
  }
}

Ergebnis

In diesem Beispiel wird jeder Listeneintrag mit einem anderen Wert von background-repeat-x abgeglichen.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• background-repeat-y und die background-repeat Kurzschreibweise.
• background Kurzschreibkomponenten: background-attachment, background-clip, background-color, background-image, background-origin, background-position (background-position-x und background-position-y), und background-size
• Verwendung mehrerer Hintergründe
• CSS Hintergründe und Rahmen Modul
• Verständnis von Seitenverhältnissen