CSSで背景画像を表示する

ここではCSSでコンテンツの背景に画像を表示させる方法を解説していきます。画像を表示させるには画像への相対パスを設定する必要があります。

background-image

CSSプロパティbackground-imageを使用して背景に画像を表示してみましょう。

background-imageの値にはurl(画像への相対パス)のように画像への相対パスを指定します。画像への相対パスの設定がわからない場合は「相対パスの詳しい解説」をご確認ください。

例題のパスはimgフォルダ内に表示させたい画像(ここではbackground-image-sample.jpg)があり、cssフォルダ内に外部ファイルのCSSがあるものとして設定表記してあります。

背景画像のサンプルはこちら（background-image-sample.jpg）

CSSプロパティ	解説
background-image	背景に画像を表示

HTMLコード記述例

<div class="bg-sample">
<p>背景に画像を設定しています。</p>
</div>

外部ファイルCSS記述例

@charset "utf-8";

div.bg-sample {
 background-image:url(../img/background-image-sample.jpg);
 width: 150px;
 height: 150px;
}

ブラウザ表示例

背景に画像を設定しています。