HTMLを学び始めてWebページを作れるようになると、背景画像も設定したいですよね。実は、HTMLでは背景画像の設定方法が数種類あるんです。厳密には、HTMLの相方であるCSSも利用します。
今回は、サンプルコードを使って、HTMLを使った背景画像の設定方法をご紹介します。
目次
そもそもHTMLの背景画像とは
Webページをみていると、背景が単色だったり画像が設定されていたりします。
画像の場合は同じ画像を繰り返して表示していたり、大きく1枚になっていたりするのをみたことがあるかと思います。これらはすべてWebページを作る人が設定しているんですね。
HTMLの世界ではこれらをまとめて背景画像と呼び、同じプロパティを利用して設定することができます。
HTMLでの背景画像設定方法
それではここから、具体的にHTMLの背景画像を設定する方法を学んでいきましょう。
HTMLで背景画像を設定する際には以下の構文を使います。
|
1 2 3 |
<body background=“背景画像のURL”> ~ </body> |
とてもシンプルですね。それでは使用例を見てみましょう。
|
1 2 3 4 5 6 7 8 9 |
<html> <body background=“/img/background.jpg”> ここに本文や他のコンテンツが入ります </body> </html> |
これで背景画像が設定できましたね。HTMLで背景画像を設定した場合には同じ画像が繰り返されるようになっています。
背景画像の位置を変更したり、サイズを変更したりとより柔軟に設定したい場合には次に紹介するCSSを利用して設定しましょう。
CSSを利用した背景画像の設定方法
ここからはCSSを利用して背景画像を設定する方法をみていきます。前項でも書きましたが、CSSを利用することでより柔軟に背景画像を設定することができます。
基本的には見た目に関する部分はCSSで制御することが推奨されていますので、特別な理由がない場合にはこちらの方法で背景画像を設定することをおすすめします。
背景に使用したい色を指定
画像を選択する前の番外編として、背景に色を指定してみましょう。
シンプルなWebページを作成するならこのプロパティを利用してみるのもありですね。
また、一部だけ画像を表示してそれ以外の部分は単色にしたい場合もこのプロパティを設定しておくことで、好みの色に設定することができます。
|
1 2 3 |
body { background-color: 背景色; } |
|
1 2 3 |
body { background-color: #9271a7; } |
色の部分は「rgb(100, 200, 50)」や「rgba(202, 65, 20, 0)」のように指定することもできます。自分が設定しやすい方法で試してみてくださいね。
背景に利用したい画像を指定
CSSで背景に利用したい画像を指定するときには、background-imageプロパティを使います。
構文と使用例は以下の通りです。
|
1 2 3 |
body { background-image: url(‘背景画像のURL’); } |
|
1 2 3 |
body { background-image:url(‘/img/background.jpg’); } |
ちなみに、以下の例のように背景画像は複数設定することもできます。
|
1 2 3 |
body { background-image:url(‘/img/background1.jpg’), url(‘/img/background2’); } |
背景画像が設定されましたか？このままではHTMLで設定したときと同じですね。
ここからいくつかプロパティを追加して、思い通りに設定できるようになりましょう。
背景画像の位置を指定
まずは背景画像の位置を指定してみましょう。background-positionプロパティを使います。
|
1 2 3 |
body { background-position: 背景画像の位置; } |
|
1 2 3 4 |
body { background-image:url(‘/img/background.jpg’); background-position: top left } |
背景画像の位置は以下のいずれかを指定することができます。
|
値 |
意味 |
|
left top left center left bottom right top right center right bottom center top center center center bottom |
左上 左中央 左下 右上 右中央 をそれぞれ始点として表示 右下 中央上 中央中央 中央下 |
|
x% y% |
横軸、縦軸の順に座標をパーセンテージで指定 |
|
xpos ypos |
横軸、縦軸の順に座標をピクセルで指定 |
|
Initial |
デフォルト値 |
|
inherit |
上位のプロパティを継承する |
これで好きな位置に背景画像を表示させることができましたね。
それでは次に、背景画像の大きさを変更してみましょう。
背景画像のサイズを指定
背景画像のサイズを変更する場合は、background-sizeプロパティを使います。
|
1 2 3 |
body { background-size: 背景画像のサイズ; } |
|
1 2 3 4 |
body { background-image:url(‘/img/background.jpg’); background-size: cover; } |
背景画像のサイズとして指定できる値は以下の通りです。
|
値 |
意味 |
|
auto |
デフォルト値 画像のサイズをそのまま表示 |
|
x px y px |
横軸、縦軸の順にサイズをピクセルで指定 |
|
x% |
画像のオリジナルサイズに対する割合で指定 |
|
cover |
要素全体を覆うように伸縮して表示 |
|
contain |
画像全体が要素内に表示されるように伸縮 |
|
initial |
値をデフォルト値に指定 |
|
inherit |
上位のプロパティを継承する |
ここまでで、背景画像を好きな位置に、好きなサイズで表示させることができました。
次に、背景画像の繰り返しを制御するプロパティをみていきましょう。
背景画像の繰り返しを指定
画像を繰り返し表示したり、繰り返ししないようにしたりするにはbackground-repeatプロパティを利用します。
|
1 2 3 |
body { background-repeat: 背景画像の繰り返し設定; } |
|
1 2 3 4 |
body { background-image:url(‘/img/background.jpg’); background-repeat: no-repeat; } |
背景画像の繰り返し方法として指定できる値は以下の通りです。
|
値 |
意味 |
|
repeat |
デフォルト値 縦横両方に画像が繰り返し 収まりきらない場合は途中で切れる |
|
repeat-x |
横方向にのみ画像を繰り返し |
|
repeat-y |
縦方向にのみ画像を繰り返し |
|
no-repeat |
画像を繰り返さない |
|
space |
画像が切れないように縦横へ繰り返し |
|
round |
画像が丸みを帯びて繰り返し 途中で着れない |
|
initial |
値をデフォルト値に指定 |
|
inherit |
上位のプロパティを継承する |
これでひと通りのプロパティを設定し、思い通りに背景画像を設定することができましたね。
すべてのプロパティををまとめて設定
最後に、ここまで紹介してきたプロパティをまとめて1行で設定できるプロパティを紹介します。
プロパティを分けて書かなくてもいいので設定は楽な反面、どこにどの値を入れるのかひと目で分かりづらいこともありますので、お好みに応じて使ってみてください。
|
1 2 3 |
body { background: 色 画像 位置 サイズ 繰り返し; } |
|
1 2 3 |
body { background: lightgreen url(‘/img/background.jpg’) center center no-repeat; } |
この使用例では、背景色を薄い緑色、背景画像として/img/background.jpgを中央に繰り返しせず表示させています。
まとめ
いかがでしたか？
CSSで設定することで、HTMLで設定するよりもより細やかに背景画像を設定することができました。
是非参考にしてみてくださいね。
