【初心者向け】HTMLで背景画像を設定する方法をわかりやすく紹介

HTMLを学び始めてWebページを作れるようになると、背景画像も設定したいですよね。実は、HTMLでは背景画像の設定方法が数種類あるんです。厳密には、HTMLの相方であるCSSも利用します。

今回は、サンプルコードを使って、HTMLを使った背景画像の設定方法をご紹介します。

そもそもHTMLの背景画像とは

Webページをみていると、背景が単色だったり画像が設定されていたりします。

画像の場合は同じ画像を繰り返して表示していたり、大きく1枚になっていたりするのをみたことがあるかと思います。これらはすべてWebページを作る人が設定しているんですね。

HTMLの世界ではこれらをまとめて背景画像と呼び、同じプロパティを利用して設定することができます。

HTMLでの背景画像設定方法

それではここから、具体的にHTMLの背景画像を設定する方法を学んでいきましょう。
HTMLで背景画像を設定する際には以下の構文を使います。

とてもシンプルですね。それでは使用例を見てみましょう。

これで背景画像が設定できましたね。HTMLで背景画像を設定した場合には同じ画像が繰り返されるようになっています。

背景画像の位置を変更したり、サイズを変更したりとより柔軟に設定したい場合には次に紹介するCSSを利用して設定しましょう。

CSSを利用した背景画像の設定方法

ここからはCSSを利用して背景画像を設定する方法をみていきます。前項でも書きましたが、CSSを利用することでより柔軟に背景画像を設定することができます。

基本的には見た目に関する部分はCSSで制御することが推奨されていますので、特別な理由がない場合にはこちらの方法で背景画像を設定することをおすすめします。

背景に使用したい色を指定

画像を選択する前の番外編として、背景に色を指定してみましょう。
シンプルなWebページを作成するならこのプロパティを利用してみるのもありですね。

また、一部だけ画像を表示してそれ以外の部分は単色にしたい場合もこのプロパティを設定しておくことで、好みの色に設定することができます。

色の部分は「rgb(100, 200, 50)」や「rgba(202, 65, 20, 0)」のように指定することもできます。自分が設定しやすい方法で試してみてくださいね。

背景に利用したい画像を指定

CSSで背景に利用したい画像を指定するときには、background-imageプロパティを使います。

構文と使用例は以下の通りです。

ちなみに、以下の例のように背景画像は複数設定することもできます。

背景画像が設定されましたか？このままではHTMLで設定したときと同じですね。

ここからいくつかプロパティを追加して、思い通りに設定できるようになりましょう。

背景画像の位置を指定

まずは背景画像の位置を指定してみましょう。background-positionプロパティを使います。

背景画像の位置は以下のいずれかを指定することができます。

これで好きな位置に背景画像を表示させることができましたね。
それでは次に、背景画像の大きさを変更してみましょう。

背景画像のサイズを指定

背景画像のサイズを変更する場合は、background-sizeプロパティを使います。

背景画像のサイズとして指定できる値は以下の通りです。

ここまでで、背景画像を好きな位置に、好きなサイズで表示させることができました。
次に、背景画像の繰り返しを制御するプロパティをみていきましょう。

背景画像の繰り返しを指定

画像を繰り返し表示したり、繰り返ししないようにしたりするにはbackground-repeatプロパティを利用します。

背景画像の繰り返し方法として指定できる値は以下の通りです。

これでひと通りのプロパティを設定し、思い通りに背景画像を設定することができましたね。

すべてのプロパティををまとめて設定

最後に、ここまで紹介してきたプロパティをまとめて1行で設定できるプロパティを紹介します。

プロパティを分けて書かなくてもいいので設定は楽な反面、どこにどの値を入れるのかひと目で分かりづらいこともありますので、お好みに応じて使ってみてください。

この使用例では、背景色を薄い緑色、背景画像として/img/background.jpgを中央に繰り返しせず表示させています。

まとめ

いかがでしたか？
CSSで設定することで、HTMLで設定するよりもより細やかに背景画像を設定することができました。

是非参考にしてみてくださいね。