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("/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 ein oder mehrere Werte angegeben, die durch Kommas getrennt sind.

Werte

repeat

Der Standardwert. Das Bild wird so oft wiederholt, dass es die gesamte Breite des Bereichs für die Hintergrundbildbemalung abdeckt. 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 background-position CSS-Eigenschaft definiert.

space

Das Bild wird so oft wie möglich ohne Abschneiden wiederholt. Die ersten und letzten Bilder werden an die linke und rechte Seite des Elements geheftet, und der Leerraum wird gleichmäßig dazwischen verteilt. Die Eigenschaft background-position-x wird ignoriert, es sei denn, ein oder mehrere Bilder können ohne Zuschneiden angezeigt werden. Wenn das Bild breiter als das Element ist, wird es abgeschnitten, da nicht genug Platz ist, um es anzuzeigen.

round

Das Bild wird horizontal wiederholt. Wenn der verfügbare Platz größer wird, strecken sich die wiederholten Bilder (ohne Lücken zu lassen), bis Platz ist, ein weiteres hinzuzufügen. 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 oder die Hintergrundbilder horizontal wiederholt oder gar nicht wiederholt werden sollen.

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

Die wiederholten Bilder können gleichmäßig voneinander entfernt sein, um sicherzustellen, dass die wiederholten Bilder nicht in horizontaler Richtung zugeschnitten werden. Mit dem Wert space, wenn die Breite des Hintergrundbemalungsbereichs kein Vielfaches der Breite des Bildes ist oder anderweitig keine Größe hat, die ein Vielfaches der Hintergrundgröße in 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 Zuschneiden abzudecken. Mit round wird das Wiederholungsbild gestreckt, um den gesamten verfügbaren Raum auszufüllen, bis Platz ist, ein weiteres Wiederholungsbild hinzuzufügen.

Zum Beispiel wird bei einem Hintergrundbild, das 100px x 100px groß ist, und einem Hintergrundbemalungsbereich, der 1099px breit ist, das Bild auf 109.9px Breite skaliert und 10 Mal in der horizontalen Richtung wiederholt. Dadurch wird das Seitenverhältnis des Bildes geändert und verzerrt. Falls die Breite des Bemalungsbereichs um 1px auf 1100px anwächst, passt horizontal ein 11. Bild hinein, wobei jedes Bild in 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

Einstellen 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 jedes Listenelement mit einem anderen Wert von background-repeat-x abgeglichen.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• background-repeat-y und die background-repeat Kurzschreibweise.
• background Kurzschreibweise Komponenten: 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