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 2015年7月.
* Some parts of this feature may have varying levels of support.
background-image は CSS のプロパティで、要素に 1 つ以上の背景画像を設定します。
試してみましょう
background-image: url("/shared-assets/images/examples/lizard.png"); background-image: url("/shared-assets/images/examples/lizard.png"), url("/shared-assets/images/examples/star.png"); background-image: url("/shared-assets/images/examples/star.png"), url("/shared-assets/images/examples/lizard.png"); background-image: linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5)), url("/shared-assets/images/examples/lizard.png"); <section id="default-example"> <div id="example-element"></div> </section> #example-element { min-width: 100%; min-height: 100%; padding: 10%; } 画像はお互いの上に積み重ねるコンテキストレイヤーに描画されます。最初に指定されたレイヤーが、ユーザーに対し最も手前にあるかのように描画されます。
要素の境界は背景画像よりも上、 background-color は背景画像より下に描画されます。画像がボックスとその境界に対し相対的にどう描画されるかは、 background-clip および background-origin プロパティによって定義されます。
指定された画像を描画することができない (例えば、指定された URI が指し示すファイルをロードできない) 場合、ブラウザーはその指定を none 値であるかのように処理します。
メモ: たとえ画像が不透明で通常は色が表示されないとしても、ウェブ開発者は常に background-color を指定すべきです。例えばネットワークが切断された場合など、もし画像が読み込めなかったときに、背景色がフォールバックとして使われます。
構文
/* 単一の画像 */ 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> 値として指定されます。
複数の背景画像を指定するには、複数の値をカンマで区切って指定してください。
値
アクセシビリティ
ブラウザーは、背景画像に関する特別な情報を支援技術に提供しません。これは主に読み上げアプリにとって重要であり、読み上げアプリはその存在を告知しないため、ユーザーには何も伝えません。ページの全体的な目的を理解する上で重要な情報が画像に含まれている場合は、文書の中でその意味を記述した方が良いでしょう。
- MDN "WCAG を理解する ― ガイドライン 1.1 の解説"
- Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0
さらに、背景画像と前景テキストのコントラスト比を確保し、弱視者がページコンテンツを読めるようにすることも重要です。
カラーコントラスト比は、テキストと背景色の値の輝度を比較して決定されます。ウェブコンテンツアクセシビリティガイドライン (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> |
<image()> |
<image-set()> |
<cross-fade()> |
<element()> |
<gradient>
<image()> =
image( <image-tags>? [ <image-src>? , <color>? ]! )
<image-set()> =
image-set( <image-set-option># )
<cross-fade()> =
cross-fade( <cf-image># )
<element()> =
element( <id-selector> )
<image-tags> =
ltr |
rtl
<image-src> =
<url> |
<string>
<image-set-option> =
[ <image> | <string> ] [ <resolution> || type( <string> ) ]?
<cf-image> =
[ <image> | <color> ] &&
<percentage [0,100]>?
<id-selector> =
<hash-token>
例
背景画像の重ね合わせ
星の画像は一部透過となっており、猫の画像の上に重ねられている点に注意してください。
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
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 |