HTML/CSSを学習中の皆さんは、背景に単色だけでなく画像を設定できることはご存じですか？背景画像の設定方法はとても簡単ですが、画面サイズに背景画像を合わせるための操作方法は少し複雑。今回は背景画像を繰り返して表示させる方法について詳しくご紹介します！
目次
HTMLで背景に画像を設定する方法
background-imageプロパティ
まずは背景画像の設定方法を学びましょう。背景画像はHTMLではなくCSSのプロパティで設定します。使用するプロパティはbackground-imageプロパティ。その名の通り、背景画像を設定するためのプロパティです。
HTML
HTMLでは必須の要素のみを記述しています。背景画像はHTMLの本体部分であるbody要素を指定して行います。
|
1 2 3 4 5 |
<!DOCTYPE html> <html lang="ja"> <head></head> <body></body> </html> |
CSS
body要素を指定してbackground-imageプロパティを設定しました。背景画像の情報はurl()の部分に、ダブルクォーテーション（“”）で囲って記述します。
ここではサイズ指定をしていないため、画像が全体を覆うように自動的に調整されます。
|
1 2 3 |
body { background-image: url("https://webukatu.com/wordpress/wp-content/uploads/2020/12/martin-jernberg-UdURxHDhrgY-unsplash.jpg"); } |
背景画像の配置方法を細かく設定する
背景画像を繰り返して表示するには、まずは背景画像のサイズ調整を行わなければなりません。background-sizeプロパティを使用して、背景画像の配置方法を変更してみましょう。
CSSの記述方法は以下の通りです。先ほど記述したbackgroud-imageの下に、backgroud-sizeを記述しています。設定した値は初期値のautoです。画像サイズが足りず、画面に空白が出た場合は自動的に画像が繰り返されます。
|
1 2 3 4 |
body { background-image: url("https://webukatu.com/wordpress/wp-content/uploads/2020/12/martin-jernberg-UdURxHDhrgY-unsplash.jpg"); background-size: auto; } |
| 値 | 説明 | 例 |
|---|---|---|
| auto | 初期値、画面全体を覆うように画像サイズを自動調整する。 |  |
| contain | 縦横比を保ったまま自動的に画像サイズを調節する。（空白部分は画像を繰り返して表示） |  |
| cover | 縦横比を保ったまま空白が出ないように自動的に画像サイズを調節する。 |  |
| <length> | ピクセル値で指定。 |  |
| <percentage> | ％で指定。 |  |
HTMLの要素では背景画像は設定できない
注意したいのが、HTMLのimg要素で背景画像を設定した場合は、CSSで繰り返しなどの詳細な設定ができないという点です。
画像を挿入するという点では類似していますが、imgタグとbackground-imageプロパティでは使用用途が全く異なりますので、注意してください。
・img→画像を挿入するための要素
・background-image→”背景画像”を設定するための要素
See the Pen
imgタグ使い方 by rabbittyu (@rabbittyu)
on CodePen.
背景画像の繰り返しを切り替える
背景画像は画面に空白が開くと、自動的に繰り返されますが、実はこの繰り返しは切り替えることができるのです。ここで使用するのは、繰り返しの有無を設定するbackground-repeatプロパティです。実際の使用例をみて確認してきましょう。
|
1 2 3 4 5 |
body { background-image: url("https://webukatu.com/wordpress/wp-content/uploads/2020/12/martin-jernberg-UdURxHDhrgY-unsplash.jpg"); background-size: 80%; background-repeat: no-repeat; } |
先ほどは画面に空白が出ないように、足りない分は画像を繰り返して表示することで補っていましたが、ここでは画像を繰り返さないno-repeatを適用したため、画像は1回も繰り返すことなく表示されています。
background-repeatで使用できる値
| 値 | 説明 | 例 |
|---|---|---|
| repeat-x | 横方向にのみ画像が繰り返される。 |  |
| repeat-y | 縦方向にのみ画像が繰り返される。 |  |
| repeat | 画面全体が隠れるように、画像が繰り返される。 |  |
| space | 画像間にスペースを入れて繰り返す。（画像サイズと画面サイズの比が整数倍でない場合） |  |
| round | 画像を拡大・縮小して繰り返す。（画像サイズと画面サイズの比が整数倍でない場合） |  |
| no-repeat | 画像の繰り返しを解除する。 |  |
背景画像繰り返しをレスポンシブに対応させる【メディアクエリ】
ではここからは習得した背景画像の繰り返しを利用した、実用的な活用例を見ていきましょう。今回は実用例として、パソコンとスマートフォンの両方に対応するよう設定を施します。設定としてパソコンでは背景画像が画面を覆うように設定し、スマートフォンでは画像が縦に繰り返されるようにしてみました。
HTML
HTMLは以下のように記述しました。今回はスタイルシートを別に用意せず、headタグ内にstyleタグを記述して、そこにCSSを書き込んでいきます。この中で最も重要なのが<meta name=”viewport” content=”width=device-width, initial-scale=1″>です。これはレスポンシブ対応で必ず必要になるため、忘れずに記述しましょう。
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html lang="ja"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> </style> </head> <body> </body> </html> |
CSS
CSSはstyleタグの中に書き込みます。まずはデバイス関係なく、背景画像をbackground-imageで設置します。背景画像の繰り返し方法や、配置方法は@mediaプロパティを使用して、デバイスごとに細かく設定しました。今回はパソコン用の画面サイズ1024px～と、スマホ用の～480pxの2つを設定します。
@mediaでは画面を持つデバイスであることと、その画面サイズの指定を行い、その中でCSSを書いていきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
body { background-image:url("https://webukatu.com/wordpress/wp-content/uploads/2020/12/josh-hild-_TuI8tZHlk4-unsplash.jpg"); } @media screen and (min-width: 1024px){ body { background-size:cover; background-repeat: no-repeat; } } @media screen and (max-width: 480px){ body { background-size:cover; background-repeat: repeat-y; } } |
まとめ
今回は背景画像を繰り返して表示させる方法や、繰り返しの切り替え方法、様々なデバイスに対応したレスポンシブなサイトの作り方などを解説しました。
背景画像の設定は少しややこしい点もありますが、しっかり要点を押さえればすぐに適用・応用が可能！実際にコードを書いて、しっかり理解を深めてくださいね。
参考文献：
ホームページの背景画像 HTML,CSS,background-image
CSS – bckground-repeat – とほほのWWW入門
MDN Web Docs background-repeat
