CSS - background-repeat

属性名	background-repeat
値	<repeat>[, <repeat>]*
値の詳細	<repeat> = repeat-x \| repeat-y \| [ repeat \| no-repeat \| space \| round ]{1,2}
初期値	repeat
適用可能要素	すべて
継承	継承しない
メディア	Visual / Background
サポート	C1 / e4 / N4 / Fx1 / Ch1 / Op3.5 / Sa1

■ 説明

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

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

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

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

■ 使用例

スタイルシート

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

HTML

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

CSS - background-repeat

■ 概要

■ 説明

■ 使用例

repeat

repeat-x

repeat-y

no-repeat

space

round