CSSで背景画像を設定する方法/background-imageプロパティの使い方

HTMLだけでなく、CSSでも画像のURLを指定して背景画像に使用することが可能です。

CSSでの背景画像の設定

使い方の注意点として、頭に「url」を付ける必要があります。また、()内のURLに”は付ける必要がありません。

背景画像の設定
background-image: url(画像の位置と名前);

たとえばdivに対して使用すると、次のようになります。


<div class="suna">sample</div>

/*CSS*/
.suna{
width:300px;
height:300px;
background-image: url(○○/××/sunagitsu.jpg);
}

sample

divの間に書いた文章もちゃんと反映されるため、背景画像などとしても使用できます。
デフォルトではこのようにパターンが繰り返されますが、もし背景画像を枠いっぱいにしたい場合は、background-size: cover;を指定します。縦と横の比率がちがう場合も自動で縮尺が調節されます。

背景画像を枠いっぱいにする
background-size: cover;

/*CSS*/
.suna{
width:300px;
height:300px;
background-image: url(○○/××/sunagitsu.jpg);
color:white;
text-align:center;
line-height:300px;
background-size: cover;
}

sample

CSSの便利な使い方・プロパティ逆引きリファレンス

HTMLと合わせてぜひマスターしたい、CSS関連の記事のまとめとなります。プロパティの名称と使用用途を合わせて併記しています。ちょっととっても数少ないですが、段々増える予定です。