background-image

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

background-image は CSS のプロパティで、要素に 1 つ以上の背景画像を設定します。

試してみましょう

画像はお互いの上に積み重ねるコンテキストレイヤーに描画されます。最初に指定されたレイヤーが、ユーザーに対し最も手前にあるかのように描画されます。

要素の境界は背景画像よりも上、 background-color は背景画像より下に描画されます。画像がボックスとその境界に対し相対的にどう描画されるかは、 background-clip および background-origin プロパティによって定義されます。

指定された画像を描画することができない (例えば、指定された URI が指し示すファイルをロードできない) 場合、ブラウザーはその指定を none 値であるかのように処理します。

メモ: たとえ画像が不透明で通常は色が表示されないとしても、ウェブ開発者は常に background-color を指定すべきです。例えばネットワークが切断された場合など、もし画像が読み込めなかったときに、背景色がフォールバックとして使われます。

構文

css
/* 単一の画像 */
background-image: linear-gradient(black, white);
background-image: url("cat-front.png");

/* 複数の画像 */
background-image: radial-gradient(circle, #0000 45%, #000f 48%),
  radial-gradient(ellipse farthest-corner, #fc1c14 20%, #cf15cf 80%);

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

それぞれの背景画像は、キーワード none または <image> 値として指定されます。

複数の背景画像を指定するには、複数の値をカンマで区切って指定してください。

値

none

画像を用いないことを表すキーワード。

<image>

表示する背景を記述する <image>。複数の背景に対応している場合は、カンマ区切りで複数指定することができます。

アクセシビリティ

ブラウザーは、背景画像に関する特別な情報を支援技術に提供しません。これは主に読み上げアプリにとって重要であり、読み上げアプリはその存在を告知しないため、ユーザーには何も伝えません。ページの全体的な目的を理解する上で重要な情報が画像に含まれている場合は、文書の中でその意味を記述した方が良いでしょう。

さらに、背景画像と前景テキストのコントラスト比を確保し、弱視者がページコンテンツを読めるようにすることも重要です。

カラーコントラスト比は、テキストと背景色の値の輝度を比較して決定されます。ウェブコンテンツアクセシビリティガイドライン (WCAG) に準拠するには、本文テキストコンテンツでは 4.5:1、見出しなどの大きなテキストでは 3:1 の比率が要求されます。大きなテキストとは、 24px 以上、または太字で 18.66px 以上を定義します。

公式定義

初期値none
適用対象すべての要素。 ::first-letterおよび::first-line にも適用されます。
継承なし
計算値指定通り、ただし <url> の値は絶対パスになる
アニメーションの種類離散値

形式文法

background-image = 
  <bg-image>#  

<bg-image> = 
  <image>  |
  none     

<image> = 
  <url>       |
  <gradient>  

<url> = 
  <url()>  |
  <src()>  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )

例

背景画像の重ね合わせ

星の画像は一部透過となっており、猫の画像の上に重ねられている点に注意してください。

HTML

html
<div>
  <p class="cats-and-stars">This paragraph is full of cats<br />and stars.</p>
  <p>This paragraph is not.</p>
  <p class="cats-and-stars">Here are more cats for you.<br />Look at them!</p>
  <p>And no more.</p>
</div>

CSS

css
p {
  font-weight: bold;
  font-size: 1.5em;
  color: white;
  text-shadow: 0.07em 0.07em 0.05em black;
  background-image: none;
  background-color: transparent;
}

div {
  background-image: url("mdn_logo_only_color.png");
}

.cats-and-stars {
  background-image: url("star-transparent.gif"), url("cat-front.png");
  background-color: transparent;
}

結果

仕様書

Specification
CSS Backgrounds and Borders Module Level 3
# background-image

ブラウザーの互換性

BCD tables only load in the browser

関連情報