[CSS] background-repeat

CSS のbackground-repeatは、 背景画像の繰り返し(敷き詰め)を制御するプロパティ。
シンプルな設定で、背景画像の表現を変化させることが出来ます。

background-imageと組み合わせてショートハンド(一括指定) background を利用できます。

background-repeat Code DEMO

他の値を持つ場合があります。詳細は以下をご確認下さい

background-repeat の詳細

利用できる値

no-repeat

no-repeat

画像を繰り返さない ( 1回のみ表示 )

repeat

repeat  (初期値)

繰り返して要素全体に敷き詰める。画像の拡縮は行わない。

repeat-x

画像を横一列だけ敷き詰める

repeat-y

画像を縦一列だけ敷き詰める

round

round

繰り返して要素全体に敷き詰める。要素からはみ出さないよう画像を拡縮し、必要に応じ画像の縦横比も変更される

space

space

画像が四隅に接するようにして、等間隔で配置する

space repeat

縦は要素の左右端に接するように繰り返し、横は等間隔で配置する

repeat space

横は要素の上下端に接するように繰り返し、縦は等間隔で配置する

background-repeat の複数指定

複数の背景画像を利用している場合
カンマ ‘ , ‘ で繋ぐことで、背景画像ごとに位置を指定する事ができます。
左(最初に書かれたもの)が一番上、右に行くほど下の画像に対応します。

background-image: url(img/sanple1.png), url(img/sanple2.png); 
background-repeat: no-repeat, space;

background-repeat 設定時の注意

• repeat, no-repeat の基準値は右上になります。
• no-repeatは、background-position で位置を設定可能ですが、no-repeat以外は、基本的に background-position は無視されます。
• roundは、要素サイズに合わせ画像の縦横比が変わる為、人物やキャラクターなど歪みが気になる画像には注意が必要です。
• spaceは、画像のサイズ変更は行わずに要素にはめ込みます。
  この為、要素と画像のバランスで、画像の間に余白が入ります。この余白は指定できませんので、縦横の余白を均等にするなどの場合は画像サイズの調整が必要になります。

ブラウザ対応状況 (2020/07 現在)

• 〇
• 〇
• 〇
• 〇
• 〇
• 〇
• 〇
• 〇

※round、space は最新ブラウザでは問題ありませんが、バージョンにより未対応となりますのでご注意ください。

※より詳細な情報、最新情報、他バージョン対応などを確認されたい場合は Can I use 等のチェックサイトでお調べ下さいm(__)m