mozilla
Your Search Results

    background-repeat

    概要

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

    注意: 既に background-repeat プロパティが指定された要素に対し background ショートハンドプロパティを用いてスタイルを追加した場合、ショートハンドの値に背景の繰り返しに関する指定が無かったとしても、先に記述した background-repeat の指定は初期値で上書きされてしまう事に注意して下さい。
    [訳注] 指定した筈のスタイルが適用されない場合、これが原因となっている事があります。後から指定する背景関連プロパティを、ショートハンドを用いずに個別のプロパティで記述する事でこの問題を回避する事が出来ます。

    構文

    background-repeat: repeat-style[, repeat-style]*
    
    repeat-style
    一つの値で水平・垂直方向に対する指定を一括して行うショートハンド(省略形)シンタックス。以下の値が使用可能です。
    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」 を指定した場合と同様の表示結果となります。

    二つの値で水平・垂直方向に対する指定を個別に行うシンタックス。最初の値は x軸(水平方向)に対する指定、二つ目の値は y軸(垂直方向)に対する指定で、以下の値が使用可能です。

    repeat 背景画像は描画領域全体を覆うのに必要な回数だけ、特定方向に繰り返し描画されます。最後の背景画像が領域に収まりきらない場合は、領域のエッジによって切り取られます。
    space 背景画像は指定された方向に切り抜き無しで敷き詰められる回数だけ繰り返され、領域のエッジに最初の画像と最後の画像がそれぞれ接触するように描画され、残ったスペースを画像間に均一に分配する形で表示されます。space 値の指定時には、その対象とする方向の background-position の指定は無効となります。一点で領域幅を超える背景画像が指定された場合のみ、背景画像が切り抜かれます。
    round 背景画像は指定された方向に切り抜き無しで描画領域全体を極力覆うよう繰り返されます。繰り返された画像が整数倍で収まりきらない場合、整数倍で収まるように拡大縮小されて表示されます。その上で描画対象領域が背景を繰り返した領域全体よりも大きい場合は、背景画像は残りの背景描画領域を覆うまで繰り返されます。
    no-repeat 背景画像のタイリングを無効化します。背景画像は background で指定した位置にひとつだけ描画される事になります。

    実際の表示を確認

    .exampleone {
      background-image: url("logo.png");
      background-repeat: repeat-x;
    }
    
    .exampletwo {
      background-image: url("logo.png");
      background-repeat: no-repeat;
    }
    
    .examplethree {
      background-image: url("img1.png"), url("img2.png");
      background-repeat: repeat-x, repeat-y;
    }

    仕様

    仕様書 策定状況 コメント
    CSS Backgrounds and Borders Module Level 3 勧告候補 multiple backgrounds のサポート、
    水平・垂直方向にそれぞれ別の繰り返し方法を指定する二値構文、
    space キーワード及び round キーワードのサポート、
    インラインレベルボックスに背景を指定した際の背景描画領域の明確な定義
    CSS 2.1 勧告 特筆すべき変更点は無し
    CSS 1 勧告  

    ブラウザ実装状況

    機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
    基本サポート 1.0 1.0 (1.7 or earlier) 4.0 3.5 1.0 (85)
    Multiple backgrounds 1.0 3.6 (1.9.2) 9.0 10.5 1.3 (312)
    X と Y の 向きの値に異なる値を指定可能(二値構文) (有) 13.0 (13.0) バグ 548375 9.0 (有) (有)
    round キーワード及び space キーワード 未サポート 未サポート バグ 548372 9.0 10.5 未サポート
    機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    基本サポート ? ? ? ? ?
    Multiple backgrounds ? ? ? ? ?
    X と Y の 向きの値に異なる値を指定可能(二値構文) ? ? ? ? ?
    round キーワード及び space キーワード ? ? ? ? ?

    関連情報

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

    Contributors to this page: ethertank
    最終更新者: ethertank,
    サイドバーを隠す