• css

CSSで画像を背景に貼ってみよう

はじめに

ホームページ制作で画像を背景にはらないといけないのですが、色を指定したりするやり方はわかるのですが・・画像はどうやって設定すれば背景に設定することができますか?
画像を背景に設定するやり方は、色を設定するように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;//ここでは仮に縦幅を400pxとします。
 background:url('sample.jpg');//ここに画像のurlを書きましょう
 background-size:cover;//背景領域を完全に覆う場合に設定しましょう。containなど背景に収まる最大サイズで設定するオプションもあります。
}

サンプルコードの実行例

background-size:containを使った場合
background-size:coverを使った場合

background-size:containを使った場合、画像の縦横比がボックスのサイズに合っていないため、画像リピートしていることがわかります。又,background-size:coverを使用した場合、画面サイズを伸縮させると画像が横幅から切れていきます。
それぞれ使用用途に応じて、使ってみてください。

関連記事

  1. テキスト文字を中央、左右にcssで寄せよう

  2. CSSで文字の間隔を変更してみた

  3. CSSで見出しを飾りつけよう

  4. リストの前の丸をcssで消してみよう

  5. CSSを使って画面サイズに対応しよう

  6. cssでマウスをおいた時に動かそう

2020年9月
 123456
78910111213
14151617181920
21222324252627
282930