background-repeat

by 2 contributors:

概要

background-repeat プロパティは背景画像の繰り返し描画に関する指定を行います。垂直、水平、またはその両方に対して繰り返しの有無を指定する事が可能です。 繰り返した背景が対象の描画領域に正確に納まらない場合の描画方法は、製作者によって指定可能です。デフォルトでは全面を覆うまで繰り返され、はみ出した部分は領域のエッジによって切り取られます。他にも、背景画像のリサイズを伴う方法や、背景画像間にスペースを挿入する方法など、別の敷き詰め方法を選択する事も可能です。

  • 初期値 repeat
  • 適用対象 全要素. It also applies to ::first-letter and ::first-line.
  • 継承 継承しない
  • メディア visual
  • 計算値 a list, each item consisting of two keywords, one per dimension
  • アニメーションの可否 不可
  • 正規順序 形式文法で定義される一意のあいまいでない順序

構文

/* 値 1 つの構文 */
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: space;
background-repeat: round;
background-repeat: no-repeat;

/* 値 2 つの構文: 水平方向 | 垂直方向 */
background-repeat: repeat space;
background-repeat: repeat repeat;
background-repeat: round space;
background-repeat: no-repeat round;

background-repeat: inherit;

<repeat-style>
値 1 つの構文は完全な値 2 つの構文に対するショートハンド(省略形)です:
単一の値 対応するペアの値
repeat-x repeat no-repeat
repeat-y no-repeat repeat
repeat repeat repeat
space space space
round round round
no-repeat no-repeat no-repeat
値 2 つの構文では、最初の値は水平方向の繰り返しの振る舞いを表し、2 つ目の値は垂直方向の振る舞いを表します。以下は各値が各方向にどう働くかの説明です:
repeat 画像は描画領域全体を覆うのに必要な回数だけ、繰り返し描画されます。最後の背景画像が領域に収まりきらない場合は切り取られます。
space 画像は指定された方向に切り抜き無しで敷き詰められる回数だけ繰り返されます。最初の画像と最後の画像は領域の両端にそれぞれ接触するように描画され、余白が画像同士の間に均一に分配されます。background-position プロパティは、画像を 1 つしか切り抜き無しで敷き詰められない場合を除き、無視されます。space を使用していて背景画像が切り抜かれるのは、領域幅を超える背景画像が指定された場合のみです。
round 許された空間の大きさが増えるにつれ、繰り返し描画された画像は、画像をもう 1 つ追加するだけの余裕ができるまで(隙間を作らず)引き伸ばされます。次の画像が追加されると、描画されたすべての画像は余裕ができるよう押し縮められます。例: 元々の幅が 260px の画像が 3 回繰り返されているとき、それぞれが幅 300px になるまでは引き伸ばされ、それから画像がもう 1 つ追加されます。そのときそれぞれは 225px に押し縮められます。
no-repeat 画像は繰り返し描画されません(したがって背景画像描画領域が完全に埋め尽くされるとは限りません)。背景画像の位置は background-position CSS プロパティで定義されます。

形式文法

<repeat-style>#

where
<repeat-style> = repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}

Live page example

実際の表示を確認

リストでの例

HTML

<ol>
    <li>no-repeat
        <div class="one">&nbsp;</div>
    </li>
    <li>repeat
        <div class="two">&nbsp;</div>
    </li>
    <li>repeat-x
        <div class="three">&nbsp;</div>
    </li>
    <li>repeat-y
        <div class="four">&nbsp;</div>
    </li>
    <li>repeat-x, repeat-y (multiple images)
        <div class="five">&nbsp;</div>
    </li>
</ol>

CSS

/* 例の中のすべての DIV で共有 */
li {margin-bottom: 12px;}
div {
    background-image: url(https://developer.mozilla.org/samples/cssref/background-repeat/starsolid.gif);
    width: 144px;
    height: 84px;
}

/* background repeat CSS */
.one {
    background-repeat: no-repeat;
}
.two {
    background-repeat: repeat;
}
.three {
    background-repeat: repeat-x;
}
.four {
    background-repeat: repeat-y;
}

/* 複数の画像 */
.five {
    background-image:  url(https://developer.mozilla.org/samples/cssref/background-repeat/starsolid.gif),
                       url(https://developer.cdn.mozilla.net/media/redesign/img/favicon32.png);
    background-repeat: repeat-x,
                       repeat-y;
    height: 144px;
}

この例では、リストの各要素に background-repeat の異なる値が対応付けられています。

仕様

仕様書 策定状況 コメント
CSS Backgrounds and Borders Module Level 3
The definition of 'background-repeat' in that specification.
勧告候補 複数の背景画像、水平・垂直方向にそれぞれ別の繰り返し方法を指定できる値 2 つの構文、spaceround キーワード、および背景描画領域を明確に定義したことによる、インラインレベル要素に対する背景のサポートの追加。
CSS Level 2 (Revision 1)
The definition of 'background-repeat' in that specification.
勧告 特筆すべき変更点は無し
CSS Level 1
The definition of 'background-repeat' in that specification.
勧告  

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 1.0 1.0 (1.7 or earlier) 4.0 3.5 1.0 (85)
複数の背景 1.0 3.6 (1.9.2) 9.0 10.5 1.3 (312)
X 方向と Y 方向に異なる値(値 2 つの構文) (有) 13.0 (13.0) バグ 548375 9.0 (有) (有)
roundspace キーワード 未サポート 未サポート バグ 548372 9.0 10.5 未サポート
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート ? ? ? ? ?
複数の背景 ? ? ? ? ?
X 方向と Y 方向に異なる値(値 2 つの構文) ? ? ? ? ?
roundspace キーワード ? ? ? ? ?

関連情報

ドキュメントのタグと貢献者

Contributors to this page: mitsuba-clover, ethertank
最終更新者: mitsuba-clover,