はじめに
ホームページ制作で画像を背景にはらないといけないのですが、色を指定したりするやり方はわかるのですが・・画像はどうやって設定すれば背景に設定することができますか？
画像を背景に設定するやり方は、色を設定するようにcssで設定することができます。
画像を背景に設定するのにjavascriptなどを使う必要がないんですね。cssだけでできるのか・・
ただし画像を設定した場合、縦幅はcssで設定したheightになります。そのため、画面を小さくしたり大きくしたりすると画像が切れていくので、ここは注意が必要ですね。
なるほど・・確かに画像を背景に設定すると窓あき封筒みたいな状態になっているわけですからね・・
そのような例えば一番わかりやすいかもですね。では、サンプルを使って説明していきますね。
CSSを使って画像を背景に設定する
今回は、cssを使って画像を背景に設定してきます。
画像を背景に貼る際、backgroundのサイズを設定するときは、必ず画像を先に指定する必要があります。先にbackgroundサイズを設定してから、背景画像を設定しても設定が効かないので、ご注意ください。
サンプルコード
HTML
<!DOCTYPE html> <head> <title>cssで画像を背景に貼ってみよう</title> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="bg_img"></div> </body> </html>
CSS
.bg_img{
width:100%;
height:400px;//ここでは仮に縦幅を４００pxとします。
background:url('sample.jpg');//ここに画像のurlを書きましょう
background-size:cover;//背景領域を完全に覆う場合に設定しましょう。containなど背景に収まる最大サイズで設定するオプションもあります。
}
サンプルコードの実行例
background-size:containを使った場合
background-size:coverを使った場合
background-size:containを使った場合、画像の縦横比がボックスのサイズに合っていないため、画像リピートしていることがわかります。又,background-size:coverを使用した場合、画面サイズを伸縮させると画像が横幅から切れていきます。
それぞれ使用用途に応じて、使ってみてください。
