CSSの背景リピートプロパティ
例
唯一の垂直方向のリピート背景画像:
body
{
background-image:url('paper.gif');
background-repeat:repeat-y;
}
{
background-image:url('paper.gif');
background-repeat:repeat-y;
}
»をお試しください
タグの定義と指示
タイルオブジェクトのbackground-imageプロパティを設定する方法。
デフォルトでは、繰り返し背景画像垂直方向と水平方向。
デフォルト: | リピート |
---|---|
継承: | いいえ |
バージョン: | CSS1 |
JavaScriptシンタックス: | オブジェクトobject.style.backgroundRepeatは= "リピート-Y」を |
ブラウザのサポート
表中の数字は、プロパティのバージョン番号をサポートする最初のブラウザを表します。
すぐにデジタル-webkit-を以下、-ms-またはプレフィックスのサポートに前-moz-は最初のブラウザのバージョン番号を属性。
<Property | |||||
---|---|---|---|---|---|
background-repeat | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
一つの要素IE8における複数の背景画像やブラウザの以前のバージョンはサポートしていません。
IE7およびそれ以前のバージョンはサポートしていないことに注意してください値を「継承(継承)」。 IE8は、定義する必要があります! DOCTYPE。 IE9のサポート」継承(継承)。」
ヒントと注意事項
ヒント:のbackground-positionプロパティは、背景画像の位置を設定します。任意の背景なしで場所を指定した場合、画像は常に要素の左上隅に配置されています。
プロパティ値
値 | 説明 |
---|---|
リピート | 背景画像は、縦方向および横方向を繰り返します。 これがデフォルトです |
繰り返し-X | 背景のみの画像の水平方向の位置が繰り返されます |
繰り返し-Y | 背景のみの画像の垂直方向の位置が繰り返されます |
ノー・リピートありません | 背景画像は繰り返されません。 |
受け継ぎます | 背景repea属性の設定は親要素から継承されるように指定します |
オンラインの例
垂直および水平方向に背景画像を繰り返す方法
この例では、垂直方向および水平方向に背景画像を繰り返す方法を示しています。
水平方向のみに背景画像を繰り返す方法
この例では、水平方向のみ背景画像を繰り返す方法を示しています。
一度だけ、背景画像を表示する方法
この例では、一度だけ繰り返さない背景画像を表示する方法を示します。
関連記事
CSSチュートリアル: CSSの背景
CSSリファレンスマニュアル: のbackground-positionプロパティ