CSSのbackground-imageプロパティを使うと、色ではなく画像を使うことができます。

画像を使うことでbackground-colorではできなかった模様だったり、写真素材を使った表現ができるのでWeb制作のデザインでは重要なものとなります。

スポンサーリンク

background-imageの記述方法

background-imageの記述方法

background-imageはプロパティ値にurl(“指定の画像ファイルURL”);と入れることで、背景に画像を指定することができます。

また画像の参照先(パス)は、絶対参照か相対参照で記述してください。よくあるミスとしてこのパスの記述が間違っていて、背景画像がうまく表示されない…ということがあるので注意しましょう。パスはCSSファイルから見た画像ファイルの位置になります。

実際にbackground-imageの記述例をよく使う画像の拡張子と合わせてご紹介します。拡張子までしっかり書かないと表示がうまくいかないので間違えないようにしてくださいね。

JPG(ジェイペグ)画像を使用

background-image: url("./image/sample01.jpg");

PNG(ピング)画像を使用

background-image: url("./image/sample02.png");

GIF(ジフ)画像を使用

background-image: url("./image/sample03.gif");

通常は他のプロパティと併用して使う

背景はbackground-repeatやbackground-sizeなどと併用して使うことが多いですが、ここではひとまずbackground-imageの使い方のみシンプルにご紹介しました。

背景に画像を使う時の注意点としては、できるだけファイルサイズの軽いものを使うようにしましょう。

時々背景に数メガの重い写真などを使っているサイトを見かけますが、読み込みに時間がかかりサイトを表示するのに負担がかかるのでおすすめできません…。

グラデーションの設定も可能

他にはbackground-image(もしくはbackground)でlinear-gradientという関数を使うと、グラデーションも設定することができます。linear-gradientについてはまた別の記事でご紹介しますね。

というわけで以上、background-imageプロパティの使い方についてでした。背景は使うスペースが広いことが多いので、色々な素材を使いこなせるとWebデザインの表現の幅がぐっと広がりますよ。