CSS background-repeat 属性

定義と使用方法

background-repeat 背景画像の繰り返しの設定とその方法

デフォルトでは、背景画像は水平および垂直方向に繰り返されます。

詳細な説明

background-repeat 属性で画像のタイルモードが定義されます。

元画像から繰り返し始めます。元画像は background-image 定義し、以下に基づいて background-position の値を配置します。

も参照してください：

CSS 教程：CSS 背景

CSS 参考手帳：background-position 属性

HTML DOM 参考手帳：backgroundRepeat 属性

例

body
  {
  background-image: url(stars.gif);
  background-repeat: repeat-y;
  }

実際に試してみてください

ヒントとコメント

ヒント：背景画像の場所は background-position 属性で設定されます。background-position 属性が指定されていない場合、画像は要素の左上隅に配置されます。

CSS 语法

background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit;

属性値

属性値

値 説明
repeat デフォルト。背景画像は垂直方向および水平方向に繰り返されます。
repeat-x 背景画像は水平方向に繰り返されます。
repeat-y 背景画像は垂直方向に繰り返されます。
no-repeat 背景画像は一度だけ表示されます。
inherit 親要素から background-repeat 属性の設定を継承するべきです。

技術的詳細

デフォルト値： repeat
継承性： no
バージョン： CSS1
JavaScript 语法： object.style.backgroundRepeat="repeat-y"

他の例

背景画像を垂直方向に繰り返す方法
この例では、背景画像を垂直に繰り返す方法を示します。
背景画像を水平方向に繰り返す方法
この例では、背景画像を水平に繰り返す方法を示します。
背景画像を一度だけ表示する方法
この例では、背景画像を一度だけ表示する方法を示します。

ブラウザのサポート

テーブルの数字には、その属性を完全にサポートする最初のブラウザのバージョンが記載されています。

Chrome Edge Firefox Safari Opera
Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5