background-repeat-y

試してみましょう

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%;
}

構文

/* キーワード値 */
background-repeat-y: repeat;
background-repeat-y: space;
background-repeat-y: round;
background-repeat-y: no-repeat;

/* グローバル値 */
background-repeat-y: inherit;
background-repeat-y: initial;
background-repeat-y: revert;
background-repeat-y: revert-layer;
background-repeat-y: unset;

background-repeat-y プロパティは、カンマで区切って複数の値を指定することができます。

値

repeat

デフォルト値です。画像は、背景画像の描画領域の高さ全体を埋めるのに必要な回数だけ反復されます。複数の画像が背景の高さにぴったり収まらない場合、端の部分は切り取られます。

no-repeat

画像は反復して描画されません。背景画像の位置は CSS の background-position プロパティで定義されます。

space

画像は、切り取られることなく敷き詰められるだけ反復して表示されます。最初と最後の画像は要素の上下の端に配置され、余白が画像間に均等に配分されます。background-position-y プロパティは、1 つ以上の画像が切り取られることなく表示できる場合を除き、無視されます。画像が要素よりも高さが高い場合、表示させる余地がないため、画像は切り取られます。

round

画像は垂直方向に反復して表示されます。利用できる空間のサイズが大きくなると、反復表示される画像は（隙間がなくなるように）引き伸ばされ、さらに1枚追加できる余地があるまで続きます。複数の画像が背景にぴったり収まらない場合は、収まるようにサイズが調整されます。

解説

background-repeat-y プロパティは、カンマで区切った <repetition> キーワードのリストを受け付け、背景画像をどのように垂直方向に反復させるか、または全く反復させないかを定義します。

デフォルト値は repeat です。この値では、背景画像は垂直方向に反復されて背景領域全体を埋め、端の画像は要素の高さに合わせて切り取られます。切り取られる端が上なのか、下なのか、両方なのかは、対応する background-position の値によって決まります。画像が反復される回数や、端の画像がどれだけ切り取られるかは、背景の描画領域のサイズと対応する background-size プロパティの高さの値によって決まります。

等しい間隔を空けて反復画像を配置することで、反復画像が垂直方向に切り取られないようにすることもできます。space 値を使用した場合、背景描画領域の高さが画像の高さの倍数でないか、または Y 軸方向において背景画像のサイズの倍数でない場合、背景画像で覆われない領域が生じます。

あるいは、反復される背景画像を切り取らずに、背景領域の幅全体を覆うように引き伸ばすこともできます。round を使用すると、背景描画領域の高さが背景画像の高さの倍数でないときは、反復画像をもう一枚追加できる余地が生まれるまで、利用可能な空間全体を埋めるように引き伸ばされます。

たとえば、100px × 100px の背景画像があり、背景の描画領域の高さが 1099px の場合、画像は垂直方向に 10 回反復され、各画像は高さ 109.9px に引き伸ばされます。これにより、画像のアスペクト比が変化し、歪んでしまう可能性があります。描画領域の高さが 1px 増加して 1100px になると、11 枚目の画像が垂直方向に収まり、各画像は 100px の高さで描画されるため、縦方向に引き伸ばされることはなくなります。

公式定義

形式文法

background-repeat-y = 
  <repetition>#  

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

例

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;
}

/* 背景の繰り返し */
.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: "このブラウザーは `background-repeat-x` プロパティに対応していません。";
      background-color: wheat;
      display: block;
      padding: 1em;
      text-align: center;
    }
  }
}

結果

この例では、それぞれのリストアイテムが様々な background-repeat-y の値と照合されます。

仕様書

ブラウザーの互換性

関連情報

• background-repeat-x および background-repeat 一括指定
• background 一括指定の成分: background-attachment, background-clip, background-color, background-image, background-origin, background-position (background-position-x および background-position-y), background-size
• 複数の背景画像の利用
• CSS 背景と境界モジュール
• アスペクト比の理解