background-image:背景画像やグラデーションを指定する

初期値 none
適用対象 全ての要素、::first-letterおよび::first-line
継承 しない
アニメーション 離散値
対応ブラウザ caniuseで確認

background-imageプロパティの説明

background-imageは、要素の背景に一つ以上の画像を指定します。画面に対して先頭に記述された画像が最も手前に表示され、順に複数のレイヤーを重ねた状態で配置されます。

background-colorを併記する場合は、背景画像の裏に敷かれます。つまり、背景画像が表示されている範囲の背景色は画面には表示されません。それでも背景色を同時に指定する意味はあります。何らかの理由で画像が読み込めなかった時に、代替色として表示されます。

また、グラデーションを背景に使用する場合も、このプロパティを使います。なぜなら、グラデーションは画像扱いになるため、background-colorでは指定できないからです。

背景関連のプロパティを一括で指定する場合は、ショートハンド・プロパティのbackgroundを使用して下さい。

background-imageに指定できる値

none
背景画像を使用しないことを示します。これが初期値です。
<image>
画像を表すデータ型の指定値です。画像をURLで指定する型やグラデーションを定義する型などがあります。使用できる形式には以下のようなものがあります。
  • url():画像ファイルをURLで指定します
  • linear-gradient():線形のグラデーションを指定します
  • radial-gradient():放射状に広がるグラデーションを指定します
  • conic-gradient():中心を軸に回転するグラデーションを指定します
  • cross-fade():複数の画像を指定の透過度で合成します

background-imageの使い方とサンプル

background-imageプロパティの構文は以下の通りです。

CSS
/* キーワード値 */
background-image: none;

/* URL値 */
background-image: url(../images/bg.png);

/* グラデーション */
background-image: linear-gradient(#f00, #00f);
background-image: radial-gradient(to right, rgba(0,0,0,.5), rgba(255,255,255,.5));

/* 画像とグラデーション */
background-image: linear-gradient(#f00, #00f), url(../images/bg.png);

/* グローバル値 */
background-image: inherit;
background-image: initial;
background-image: revert;
background-image: unset;

background-imageの実例

それでは実際に背景画像を指定した要素を見てみましょう。背景画像は要素の幅と高さの内側に表示されるため、意図通りの位置に背景が表示されるようにスタイルを調整しましょう。

CSS
.samp_box {
	padding: 1rem;
	background-color: #ccc;
	text-align: center;
}
.samp_box > div {
	padding: 2rem 1rem;
	background-image: url(../images/sample_photo_1200x630.jpg);
}
HTML
<div class="samp_box">
	<div id="bg_1">
		<p>background-image test</p>
	</div>
</div>
表示確認

背景にグラデーションを指定する

グラデーションを使用する場合は、linear-gradient()radial-gradient()を使います。線形のグラデーションでは、次のようなバリエーションが作り出せます。

表示確認
CSS
#bg_1 {
	background-image: linear-gradient(cyan, magenta);
}
#bg_2 {
	background-image: linear-gradient(to right, cyan, magenta);
}
#bg_3 {
	background-image: linear-gradient(to bottom right, cyan, magenta);
}
#bg_4 {
	background-image: linear-gradient(45deg, cyan, magenta);
}
#bg_5 {
	background-image: linear-gradient(#f00, #ff0, #cf0, #0f0, #0cf, #00f);
}
#bg_6 {
	background-image: linear-gradient(#ff0, 75%, #0ff);
}
#bg_7 {
	background-image: linear-gradient(#ff0, 25%, #0ff);
}
#bg_8 {
	background-image: linear-gradient(#ff0 50%, #0ff 50%);
}

放射状のグラデーションを指定する場合は、以下のように記述します。

表示確認
CSS
#bg_1 {
	background-image: radial-gradient(cyan, magenta);
}
#bg_2 {
	background-image: radial-gradient(#ffc 50%, #03a 75%, #09f 90%);
}
#bg_3 {
	background-image: radial-gradient(at 0% 50%, #f00 25%, #ffc 75%);
}
#bg_4 {
	background-image: radial-gradient(ellipse closest-side, cyan, magenta);
}
#bg_5 {
	background-image: radial-gradient(circle closest-side at 10% 50%, #0ff, #ff0);
}

背景画像とグラデーションの併用

背景画像とグラデーションを併用することもできます。例えば、透過範囲を持つロゴ画像の後ろにグラデーションを敷くと、以下のような効果が得られます。

CSS
.samp_box > div {
	padding: 2rem 1rem;
	background-image: url(../images/logo_square_200x200.png), linear-gradient(#fff, 85%, #0cf);
	background-repeat: no-repeat;
	background-size: contain;
}
表示確認

background-imageに関連するCSSプロパティ

背景(バックグラウンド)
background 背景に関する指定をまとめて行う
background-attachment 背景画像の固定・移動を指定する
background-blend-mode 背景色や背景画像の描画モードを指定する
background-clip 背景の描画範囲を指定する
background-color 背景色を指定する
background-image 背景画像やグラデーションを指定する
background-origin 背景画像を配置する基準点を指定する
background-position 背景画像の表示開始位置を指定する
background-repeat 背景画像の繰り返しを指定する
background-size 背景画像を表示するサイズ(大きさ)を指定する
backdrop-filter 要素の背後領域にぼかしや色変化などのフィルタ効果を与える