CSS - background-repeat

概要

属性名	background-repeat
値	<repeat>[, <repeat>]*
値の詳細	<repeat> = repeat-x \| repeat-y \| [ repeat \| no-repeat \| space \| round ]{1,2}
初期値	repeat
適用可能要素	すべての要素
継承	継承しない
メディア	visual
アニメーション	不可
サポート	基本: https://caniuse.com/mdn-css_properties_background-repeat round: https://caniuse.com/mdn-css_properties_background-repeat_round space: https://caniuse.com/background-repeat-round-space

説明

背景画像の繰り返し方法を指定します。

値	説明
repeat-x	横方向のみリピートします。
repeat-y	縦方向のみリピートします。
repeat	リピートします。
no-repeat	リピートしません。
space	リピートします。画像サイズが表示領域の整数倍でない場合は、画像間にスペースを入れて調整します。
round	リピートします。画像サイズが表示領域の整数倍でない場合は、画像を拡大・縮小して調整します。

repeat, no-repeat, space, round をひとつのみ記述した場合は、横方向、縦方向双方に適用されます。ふたつ記述した場合は、横方向、縦方向の順に適用されます。

CSS

background-repeat: no-repeat;         /* 横:no-repeat、縦:no-repeat */
background-repeat: repeat no-repeat;  /* 横:repeat、縦:no-repeat */

使用例

CSS

.test-repeat {
  background-repeat: repeat;
  background-image: url(./image/back.gif);
  width: 85px;
  height: 85px;
  border: 1px solid gray;
}
.test-repeat-x {
  background-repeat: repeat-x;
  background-image: url(./image/back.gif);
  width: 85px;
  height: 85px;
  border: 1px solid gray;
}
.test-repeat-y {
  background-repeat: repeat-y;
  background-image: url(./image/back.gif);
  width: 85px;
  height: 85px;
  border: 1px solid gray;
}
.test-no-repeat {
  background-repeat: no-repeat;
  background-image: url(./image/back.gif);
  width: 85px;
  height: 85px;
  border: 1px solid gray;
}
.test-space {
  background-repeat: space;
  background-image: url(./image/back.gif);
  width: 85px;
  height: 85px;
  border: 1px solid gray;
}
.test-round {
  background-repeat: round;
  background-image: url(./image/back.gif);
  width: 85px;
  height: 85px;
  border: 1px solid gray;
}

HTML

<h5>repeat</h5>
<div class="test-repeat"></div>
<h5>repeat-x</h5>
<div class="test-repeat-x"></div>
<h5>repeat-y</h5>
<div class="test-repeat-y"></div>
<h5>no-repeat</h5>
<div class="test-no-repeat"></div>
<h5>space</h5>
<div class="test-space"></div>
<h5>round</h5>
<div class="test-round"></div>

CSS - background-repeat

概要

説明

使用例

repeat

repeat-x

repeat-y

no-repeat

space

round

関連項目

リンク