background-repeat-y CSS property

Probieren Sie es aus

background-repeat-y: repeat;

background-repeat-y: space;

background-repeat-y: round;

background-repeat-y: no-repeat;

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

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

Syntax

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

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

Die Eigenschaft background-repeat-y wird als eine oder mehrere durch Kommas getrennte Werte angegeben.

Werte

repeat

Der Standardwert. Das Bild wird so oft wiederholt, wie nötig, um die gesamte Höhe des Hintergrundbild-Malerbereichs abzudecken. Das Randbild wird abgeschnitten, wenn mehrere Bilder nicht genau in die Hintergrundhöhe 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 oben und unten am Element befestigt, und der Leerraum wird gleichmäßig zwischen den Bildern verteilt. Die Eigenschaft background-position-y wird ignoriert, es sei denn, ein oder mehrere Bilder können ohne Abschneiden angezeigt werden. Wenn das Bild größer als das Element ist, wird es abgeschnitten, da nicht genügend Platz vorhanden ist, um es anzuzeigen.

round

Das Bild wird vertikal wiederholt. Wenn der verfügbare Platz größer wird, werden die wiederholten Bilder gedehnt (ohne Lücken), bis genügend Platz vorhanden ist, um ein weiteres einzufügen. Wenn mehrere Bilder nicht genau in den Hintergrund passen, werden sie skaliert, um zu passen.

Beschreibung

Die Eigenschaft background-repeat-y akzeptiert eine kommagetrennte Liste von <repetition> Schlüsselbegriffen, die definieren, wie Hintergrundbilder vertikal wiederholt werden sollen oder gar nicht wiederholt werden.

Der Standardwert ist repeat. Mit diesem Wert wird das Hintergrundbild vertikal wiederholt und deckt die gesamte Höhe des Malerbereichs ab, wobei Randbilder auf die Größe des Elements zugeschnitten werden. Ob die oberen, unteren oder beide Ränder abgeschnitten werden, hängt vom entsprechenden Wert der background-position-Eigenschaft ab. Wie oft Bilder wiederholt werden und wie stark die Bilder an den Rändern abgeschnitten sind, hängt von der Größe des Hintergrundmalerbereichs und dem Höhenwert der entsprechenden background-size-Eigenschaft ab.

Die wiederholten Bilder können gleichmäßig voneinander entfernt werden, wobei sichergestellt wird, dass die wiederholten Bilder in der vertikalen Richtung nicht abgeschnitten werden. Mit dem Wert space, wenn die Höhe des Hintergrund-Malerbereichs nicht ein Vielfaches der Bildhöhe ist oder nicht anderweitig eine Größe hat, die ein Vielfaches der Hintergrundgröße entlang der y-Achse ist, gibt es Bereiche, die nicht vom Hintergrundbild abgedeckt sind.

Alternativ kann das wiederholte Hintergrundbild gedehnt werden, um die gesamte Höhe des Hintergrundbereichs ohne Abschneiden abzudecken. Mit round, wenn die Höhe des Hintergrund-Malerbereichs kein Vielfaches der Höhe des Hintergrundbildes ist, wird das wiederholte Bild gestreckt, um den gesamten verfügbaren Raum zu füllen, bis Platz vorhanden ist, um ein weiteres wiederholtes Bild hinzuzufügen.

Zum Beispiel wird bei einem Hintergrundbild, das 100px x 100px groß ist, und einem Hintergrund-Malerbereich, der 1099px hoch ist, das Bild 10-mal vertikal wiederholt, wobei jedes Bild auf 109,9px Höhe gestreckt wird, was möglicherweise das Seitenverhältnis des Bildes verändert und es verzerrt. Wenn die Höhe des Malerbereichs um 1px zunimmt und 1100px hoch wird, passt ein 11. Bild vertikal, wobei jedes Bild bei einer Höhe von 100px gemalt wird und nicht mehr in der vertikalen Richtung gestreckt wird.

Formale Definition

Formale Syntax

background-repeat-y = 
  <repetition>#  

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

Beispiele

Einstellung von background-repeat-y

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-y: no-repeat;
}
.two {
  background-repeat-y: repeat;
}
.three {
  background-repeat-y: space;
}
.four {
  background-repeat-y: round;
}

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

Ergebnis

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

Spezifikationen

Browser-Kompatibilität

Siehe auch

• background-repeat-x und die Kurzschreibweise background-repeat.
• 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