CSSリファレンス

実践向けCSSリファレンス

背景画像を指定するCSSプロパティ background-image

background-image の概要

CSSプロパティ「background-image」で、要素の背景領域に、画像やグラデーションを設定できます。

背景画像の指定方法

背景画像は、「url()」というCSSの関数に、画像のURL文字列を引き渡することで指定できます。下記は、背景画像「cat.jpg 」を高さ300px のブロック要素の背景に指定する例です。

<div class="box"></div>
<style>
.box{
  height:300px;
  background-image:url(http://www-creators.com/wp-content/uploads/2017/10/cat.jpg);
}
</style>

背景に関するのCSSプロパティとの連携

background-image は、他のCSSプロパティとの関連の中で、具体的な描画方法が決定します。下記は、background-size で「cover」を利用することで、要素内に隙間なく画像を表示し、同時に、background-position に「center」を指定することで、中央寄せを実現しています。

<div class="box"></div>
<style>
.box{
  height:300px;
  background-image:url(http://www-creators.com/wp-content/uploads/2017/10/cat.jpg);
  background-size:cover;
  background-position:center;
}
</style>

複数の背景レイヤーの設定

カンマを利用して背景の指定を列挙することで、同じ要素内に複数の背景を設定することもできます。この場合、他の background-positionbackground-repeatbackground-size などの関連するbackgroundプロパティも、同じようにカンマで区切って複数の指定を行います。

<div class="box"></div>
<style>
.box{
  height:300px;
  background-image:
    url(http://www-creators.com/wp-content/uploads/2017/10/cat.jpg),
    url(http://www-creators.com/wp-content/uploads/2017/10/wall.png);
  background-size: 90px, auto;
  background-repeat: no-repeat, repeat;
  background-position: center, 0;
}
</style>

背景色レイヤーとの共存

また、background-image は background-color と共存する事ができます。ネットワークの問題により画像のロードが遅延したり、失敗したときのために、背景色も同時に指定しておくと良いでしょう。例えば、下記のような背景パターン類似の色を背景色に指定する手法はよく用いられます。そうすることで、モバイルの低速度な通信速度に置いても、ユーザ体験をある程度保証できます。

<div class="box"></div>
<style>
.box{
  height:300px;
  background-color:#e7dcca;
  background-image:url(http://www-creators.com/wp-content/uploads/2017/10/vintage.png);
  background-size:200px auto;
  background-repeat:no-repeat; /* 注:通常はリピートします */
}
</style>

グラデーションの設定

CSS関数「linear-gradient()」や「radial-gradient()」を使ってグラデーションを描画します。それぞれ、線形(まっすぐな)グラデーションと、中央から放射上に広がるグラデーションです。

<div class="box linear"></div>
<div class="box radial"></div>
<style>
.box{
  height:150px;
}
.box.linear{ 
  background-image: linear-gradient(
    135deg, 
    #1e5799 0%, 
    #2989d8 50%,
    #7db9e8 100%
  );
}
.box.radial{
   background-image: radial-gradient(
    ellipse at center, 
    #1e5799 20%,
    #7db9e8 80%);
}
</style>

上記の通り、グラデーション関数の引数の指定方法はやや複雑です。より詳しいグラデーションの記載方法に関しては、こちらを参照して下さい。

説明
url(<画像のURL>)背景画像を指定。パスはCSSファイルからの相対パスか、絶対パスを利用できる。また、カンマで区切ることで複数指定できる。
例)url(img/background.png);
例)url(img/background-1.png), url(img/background-2.png)
none背景画像なし

実用における注意点

画像サイズ、配置、繰り返しの設定

background-image は、CSSプロパティbackground-sizebackground-imagebackground-repeatと連携します。詳しくは、各プロパティのページをご覧ください

<div class="box cover"><div>
<div class="box contain"><div>
<style>
.box{
  height:150px;
  background-image: url(http://www-creators.com/wp-content/uploads/2017/10/cat.jpg),
  background-position:center;
  background-repeat;
}
.box.contain{
  background-size:contain
}
.box.cover{
  background-size:cover;
}
</style>

画像のURLの記述

URLは、クオーテーションやダブルクオーテーションで囲む記法も認められています。下記は全て同義です。

.container{
  background-image: url(http://www-creators.com/wp-content/uploads/2017/10/cat.jpg),
  background-image: url(http://www-creators.com/wp-content/uploads/2017/10/cat.jpg),
  background-image: url(http://www-creators.com/wp-content/uploads/2017/10/cat.jpg),
}

画像のパスは、絶対パスか、このスタイルが記述されているファイルからの相対パスになります。

もし、このスタイルが「http://example.com/css」ディレクトリに置かれたファイルに記載されているのであれば、下の2つは同義です。

.container{
  background-image: url(http://example.com/images/cat.jpg)
  background-image: url(../images/cat.jpg)
}

使用例

すでに上記でいくつかの使用方法を紹介したので、ここではすこし複雑な例をご紹介します。複数の画像と、animationを利用しています。

<div class="container"><div>
<style>
.container{
  width:300px;
  height:200px;
  margin:0 auto;
  background-image: url(http://rsc.www-creators.com/sample-code/img/cat.png);
  background-color:#def;
  background-position: cover;
  background-size:180px;
}
</style>

仕様書

関連CSSプロパティ

閉じる