このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

background-repeat:背景画像の繰り返し

記事Aug. 29th,2018
July 7th,2020
背景画像の繰り返しを指定するプロパティ
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

プロパティについて

概要

初期値 background-repeat: repeat
適用対象 すべての要素
継承 不可
定義 CSS Backgrounds and Borders Module

background-repeat”は背景画像の繰り返しを指定するプロパティです。

サンプルコード

div { background-repeat: repeat;}

説明
inherit 親要素のプロパティ値を継承する
repeat 画像は表示領域全体を覆うのに必要な回数だけ、繰り返し描画されます。最後の画像は領域に収まりきらない場合は切り取られます。
repeat-x 水平方向にのみ“repeat”を指定した場合と同様繰り返し描画されます。
repeat-y 垂直方向にのみ“repeat”を指定した場合と同様繰り返し描画されます。
space 画像は表示領域全体を覆うのに必要な回数だけ、繰り返し描画されます。繰り返された画像が整数倍で収まりきらない場合、画像と画像の間には空白が入ります。 最初と最後の画像は表示領域の端に接します。
round 画像は表示領域全体を覆うのに必要な回数だけ、繰り返し描画されます。繰り返された画像が整数倍で収まりきらない場合、整数倍で収まるように拡大縮小されて表示されます。
no-repeat 画像は繰り返し描画されません。

値の指定方法

値は一つまたは二つ指定することができます。

値を一つ指定する場合

値を一つ指定する場合その値は水平方向と垂直方向両方の繰り返し方法を指定します。

div { background-repeat: 〚繰り返し方法〛;}

値を二つ指定する場合

値を二つ指定する場合一つ目の値は水平方向の繰り返し方法、二つ目の値は垂直方向の繰り返し方法を指定します。
repeat-x”および“repeat-y”は指定できません。

div { background-repeat: 〚水平方向の繰り返し方法〛 〚垂直方向の繰り返し方法〛;}

使用例

背景画像を指定する

値を一つ指定する

div {
height: 200px;
border: 5px solid rgb(0,0,0);
background-image: url(background_sample.png);
background-repeat: repeat;
}
div {
height: 200px;
border: 5px solid rgb(0,0,0);
background-image: url(background_sample.png);
background-repeat: space;
}
div {
height: 200px;
border: 5px solid rgb(0,0,0);
background-image: url(background_sample.png);
background-repeat: round;
}
div {
height: 200px;
border: 5px solid rgb(0,0,0);
background-image: url(background_sample.png);
background-repeat: repeat-x;
}
div {
height: 200px;
border: 5px solid rgb(0,0,0);
background-image: url(background_sample.png);
background-repeat: no-repeat;
}

値を二つ指定する

div {
height: 200px;
border: 5px solid rgb(0,0,0);
background-image: url(background_sample.png);
background-repeat: repeat repeat;
}
div {
height: 200px;
border: 5px solid rgb(0,0,0);
background-image: url(background_sample.png);
background-repeat: no-repeat repeat;
}
div {
height: 200px;
border: 5px solid rgb(0,0,0);
background-image: url(background_sample.png);
background-repeat: repeat no-repeat;
}
div {
height: 200px;
border: 5px solid rgb(0,0,0);
background-image: url(background_sample.png);
background-repeat: repeat space;
}
div {
height: 200px;
border: 5px solid rgb(0,0,0);
background-image: url(background_sample.png);
background-repeat: round space;
}

複数の背景画像を指定する

CSS3では複数の背景画像を指定することができるようになりました。最初に指定した背景が最前面、最後に指定した背景が最背面になるように、重ねて描画されます。
background-repeat”の値を“,(カンマ)”で区切って並べて記述することでそれぞれの背景画像の表示位置を指定することができます。値の順番はbackground-imageで指定した値の順番に対応します。

div {
height: 200px;
border: 5px solid rgb(0,0,0);
background-repeat: repeat-x,repeat-y,repeat;
background-image: url(background_sample3.png),url(background_sample.png),url(background_sample2.png); }
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク