CSSのbackground-imageとは？背景画像の基本的な使い方を解説

Webサイトの背景に写真や模様を表示したいときに使うのが、CSSのbackground-imageです。

メインビジュアルに大きな写真を配置したり、セクションの背景に繰り返し模様を入れたりと、Web制作のさまざまな場面で使用します。

しかし、初めて使うときは「画像はどこに指定するの？」「url()の中には何を書くの？」と迷うこともあるでしょう。

この記事では、background-imageの役割と基本的な使い方を、HTMLとCSSのコードを交えながら解説します。

background-imageとは？

background-imageは、HTML要素の背景に画像を設定するCSSプロパティです。

写真だけでなく、イラストや模様なども背景として表示できます。まずは基本的な役割を確認しましょう。

CSSで要素の背景に画像を表示する

background-imageを使うと、指定した要素の背景に画像を表示できます。

例えば、次のようなHTMLがあるとします。

<section class="main-visual">
  <h1>Welcome</h1>
</section>

この要素に背景画像を設定するCSSは、次のとおりです。

.main-visual {
  background-image: url("../images/main.jpg");
}

これで、.main-visualの背景に画像が表示されます。

background-imageは要素の背景を装飾するためのプロパティなので、画像の上に文字やボタンを重ねるレイアウトにも利用できます。

なお、要素に高さやコンテンツがなければ、背景画像を指定しても表示領域が確保されない場合があります。

imgタグとの違い

HTMLのimgタグでも画像を表示できますが、background-imageとは役割が異なります。

比較項目	background-image	imgタグ
指定する場所	CSS	HTML
主な用途	背景・装飾	コンテンツ画像
画像上への文字配置	背景として重ねやすい	別途レイアウトが必要
代替テキスト	指定できない	alt属性で指定できる

例えば、商品の写真や記事の内容を伝える画像にはimgタグが適しています。

一方、背景の模様や装飾目的の写真にはbackground-imageが便利です。

画像がコンテンツとして重要なのか、装飾として使うのかを基準に選びましょう。

background-imageの基本的な使い方

background-imageの基本は、url()を使って画像ファイルを指定することです。

画像の表示方法を調整するプロパティと組み合わせることで、さまざまな背景デザインを作れます。

url()で画像の場所を指定する

背景画像は、次のように指定します。

.box {
  background-image: url("../images/bg.png");
}

url()の中には、表示したい画像のパスを記述します。

例えば、ファイル構成が次のようになっている場合です。

project/
├── index.html
├── css/
│   └── style.css
└── images/
    └── bg.png

style.cssから画像を指定するには、../images/bg.pngと書きます。

../は、現在のフォルダからひとつ上の階層に移動するという意味です。

CSSの外部ファイルに記述した相対パスは、基本的にそのCSSファイルの場所を基準に解決されます。

画像が表示されない場合は、ファイル名や拡張子だけでなく、フォルダの位置も確認しましょう。

background-sizeで画像の大きさを調整する

背景画像を設定したら、次に確認したいのが表示サイズです。

background-sizeを使うと、背景画像の大きさを調整できます。

.main-visual {
  height: 400px;
  background-image: url("../images/main.jpg");
  background-size: cover;
}

coverは、画像の縦横比を維持しながら、背景の表示領域全体を覆うように拡大・縮小する指定です。

ただし、画像の一部が表示領域からはみ出して見えなくなる場合があります。

画像全体を収めたい場合には、containという指定もあります。

background-positionで表示位置を調整する

背景画像の位置を調整するときは、background-positionを使います。

.main-visual {
  height: 400px;
  background-image: url("../images/main.jpg");
  background-size: cover;
  background-position: center;
}

centerを指定すると、背景画像を表示領域の中央に配置できます。

また、background-repeat: no-repeat;を追加すれば、画像の繰り返し表示を防げます。

背景画像を設定するときによく使う指定をまとめると、次のようになります。

プロパティ	役割
background-image	背景画像を指定する
background-size	画像の表示サイズを調整する
background-position	画像の表示位置を調整する
background-repeat	画像の繰り返しを設定する

最初からすべてを覚える必要はありません。

まずはbackground-imageで画像を表示し、必要に応じてほかのプロパティを追加していきましょう。

【まとめ】background-imageで背景画像を設定しよう

background-imageは、CSSで要素の背景に画像を表示するためのプロパティです。

基本の書き方は、background-image: url("画像のパス");です。

画像が表示されない場合は、CSSファイルから見た画像の場所や、ファイル名・拡張子を確認しましょう。

また、background-sizeやbackground-positionを組み合わせると、背景画像の大きさや位置も調整できます。

まずは画像を正しく表示することが第一歩です。 基本の書き方を理解したら、サイズ調整や繰り返し表示などにも挑戦してみましょう。