background-repeatプロパティは、背景の画像を繰り返すために使います。値の指定によって繰り返す方向を変えたりできますが、
と思う方がCSSの初心者の方の中にいるでしょう。
そこで今回は、background-repeatプロパティの
・詳しい使い方
について説明していきます。
CSSを勉強している方に役立つ情報なので、ぜひ読んでみてください。
目次
background-repeatプロパティとは
background-repeatプロパティの読み方
background-repeatは、「バックグラウンド-リピート」と読みます。
repeatは、繰り返しや反復という意味があり、音楽など幅広く使われている言葉です。
CSSでも繰り返しの設定で使います。
background-repeatプロパティの説明
background-repeatプロパティとは
を指定するために使います。
背景画像を設定している要素に、横や縦など指定した方向に対して領域が埋まるまで背景画像が繰り返されます。
ですが、背景画像を繰り返すbackground-repeatプロパティを設定する前に、背景画像を設定するbackground-imageプロパティも必要です。
background-repeatプロパティで利用できる値
background-repeatプロパティでは以下の値を使うことができます。
| 値 | 説明 |
|---|---|
| repeat | repeatは、初期値として設定される値で、領域に必要な分だけ画像が繰り返されます。画像がはみ出してしまったらその分切り取られます。 |
| space | 繰り返される画像と画像の間に余白を作り出します。spaceでは画像がはみ出された場合、切り取られない状態で表示します。 |
| round | 繰り返された画像が、はみ出さないように自動で幅が調整されます。 |
| repeat-x | repeat-xを指定することによって、水平方向にのみ画像が繰り返されます。 |
| repeat-y | repeat-yでは、垂直方向にのみ画像を繰り返します。 |
| no-repeat | no-repeatは、画像を繰り返さないときに使う値です。 |
対応ブラウザ
対応ブラウザは以下の通りです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 完全対応 |
| Edge | 完全対応 |
| Firefox | 完全対応 |
| Internet Explorer | 完全対応 |
| Opera | 完全対応 |
| Safari | 完全対応 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 完全対応 |
| Android版Chrome | 完全対応 |
| Android版Firefox | 完全対応 |
| Android 版 Opera | 完全対応 |
| iOS版Safari | 完全対応 |
| Samsung Internet | 完全対応 |
background-repeatプロパティの基本的な使い方
background-repeatプロパティの使い方
background-repeatプロパティの設定をしたコードを交えて説明していきます。
See the Pen
background-repeatプロパティの使い方 by 吉井大輝 (@DaiW)
on CodePen.
background-repeatプロパティによって背景画像が繰り返し表示されています。
背景画像を繰り返し表示させることを可能にしているのが以下の設定です。
|
1 2 3 |
background-image:url( https://drive.google.com/uc?export=view&id=1qH3gZcYcJVSgu3seKSDF0sMe9m1eQC5c); height:200px; |
背景画像を設定するbackground-imageプロパティは必須ですが、背景画像を表示するための領域の設定もしなければいけません。
領域は、横幅と高さの設定で使うwidthプロパティとheightプロパティの値によって決められます。
ですが、widthプロパティがなくともheightプロパティさえ設定していれば、横幅が自動的に計算されます。
上記のコードでは、widthプロパティの設定がされていないので、横幅が100%、高さ200pxの領域ができます。
background-repeatプロパティの初期値repeat
「background-repeatプロパティの使い方」でご紹介しましたbackground-repeatプロパティの値は、repeatにしています。
|
1 2 3 4 5 6 7 |
#main{ background-image:url( https://drive.google.com/uc?export=view&id=1qH3gZcYcJVSgu3seKSDF0sMe9m1eQC5c); background-repeat:repeat; background-size:100px; height:200px; } |
上記は、#mainの要素に対して設定をしており、繰り返し表示されています。
繰り返されている画像が領域に収まっていない場合、切り取られます。
background-repeatプロパティを有効に使う
背景画像によっては、繰り返す機能を有効に使えます。どのような使い方があるのか実際にコードを記述していきます。
タイル画像を繰り返す
See the Pen
タイル画像を繰り返す by 吉井大輝 (@DaiW)
on CodePen.
タイルのような画像を繰り返すことで、合わさって大きな背景画像になります。
小さい画像を大きくすると、画質が落ちるなど、元の画像の良さを損ねてしまいます。
background-repeatプロパティの値であるroundを指定すると、画像が途切れないように自動的にサイズが調整されて繰り返されるので、画質を落とさず綺麗に表示できます。
ボーダー画像を垂直方向に繰り返す
See the Pen
ボーダー画像を垂直方向に繰り返す by 吉井大輝 (@DaiW)
on CodePen.
上記の設定は、縦のボーダー画像をbackground-repeatプロパティの値であるrepeat-yで垂直方向に繰り返し表示させています。
縦が短い画像でも、縦のボーダーのような画像ならば、垂直方向に繰り返すことで、縦長の背景画像になります。
まとめ
いかがでしたでしょうか？
今回は、background-repeatプロパティの使う意味や、詳しい使い方についてご紹介しました。
画像によってbackground-repeatプロパティで指定する値も変わってきます。コードを記述しているので、設定するときの参考になるでしょう。
ぜひ試してみてください。
参考文献：MDN web docs｜background-repeatプロパティ : 背景画像をどのように繰り返すかを設定します。
