background-repeat/背景画像繰り返し

background-repeatプロパティを使うと背景画像の繰り返し方法を指定出来ます。

説明

 background-repeatプロパティは背景画像を繰り返さないように出来ます。

background-repeat説明

 他にも横にだけ繰り返す、縦にだけ繰り返すといった設定が出来ます。

構文

 background-repeatプロパティの構文は以下の通りです。

background-repeat: 繰り返し方法;

 繰り返し方法は以下の4つから指定出来ます。

【繰り返し方法】
設定 動作
repeat 必要な高さ、横幅分繰り返します。デフォルトです。
no-repeat 1回だけ表示し、繰り返しません。
repeat-x 必要な横幅分繰り返し、縦には繰り返しません。
repeat-y 必要な高さ分繰り返し、横には繰り返しません。

利用例

 background-repeatでno-repeatを指定した利用例は以下の通りです。上の記述がCSS外部ファイル、下の記述がHTMLファイルです。又、分かり易さのため高さをheightで100pxに指定しています。

div {
background-image: url(test.png);
height: 100px;
background-repeat: no-repeat;
}

<div>ホームページ</div>

 上記を表示すると以下のように1回だけ画像が表示されます。

ホームページ

 repeat-xを指定した利用例は以下の通りです。

div {
background-image: url(test.png);
height: 100px;
background-repeat: repeat-x;
}

<div>ホームページ</div>

 上記を表示すると以下のように画像が横にだけ繰り返して表示されます。

ホームページ

 repeat-yを指定した利用例は以下の通りです。

div {
background-image: url(test.png);
height: 100px;
background-repeat: repeat-y;
}

<div>ホームページ</div>

 上記を表示すると以下のように画像が縦にだけ繰り返して表示されます。

ホームページ

背景色との同時利用

 背景色と背景画像を同時に利用すると背景画像が優先されますが、background-repeatを使うと途中から背景色を表示する事が出来ます。

div {
background-image: url(test.png);
background-color: blue;
background-repeat: no-repeat;
}

<div>ホームページ</div>

 上記を表示すると以下になります。

ホームページ

関連ページ

・ホームページ作成「ボックスのまとめ

 背景画像だけでなく、余白、幅、枠や回り込み等、ボックスの見た目や位置を変える方法を説明しています。

・ホームページ作成「スタイルシートの定義方法

 外部ファイルやHTMLに直接記述する方法等、CSSの記述方法や、優先度、入れ子等について説明しています。

検索付「CSSプロパティ早見表」に戻る

スマホ向け「CSSプロパティ一覧」に戻る

  • このエントリーをはてなブックマークに追加

★上ページに含まれるプロパティ

Access:カウンター(total)

Today:カウンター(today)   Yesterday:カウンター(yesyerday)