background-image
background-image
は CSS のプロパティで、要素に 1 つ以上の背景画像を設定します。
試してみましょう
画像はお互いの上に積み重ねるコンテキストレイヤーに描画されます。最初に指定されたレイヤーが、ユーザーに対し最も手前にあるかのように描画されます。
要素の境界は背景画像よりも上、 background-color
は背景画像より下に描画されます。画像がボックスとその境界に対し相対的にどう描画されるかは、 background-clip
および background-origin
プロパティによって定義されます。
指定された画像を描画することができない (例えば、指定された URI が指し示すファイルをロードできない) 場合、ブラウザーはその指定を none
値であるかのように処理します。
メモ: たとえ画像が不透明で通常は色が表示されないとしても、ウェブ開発者は常に background-color
を指定すべきです。例えばネットワークが切断された場合など、もし画像が読み込めなかったときに、背景色がフォールバックとして使われます。
構文
background-image: linear-gradient(
to bottom,
rgb(255 255 0 / 50%),
rgb(0 0 255 / 50%)
),
url("catfront.png");
/* グローバル値 */
background-image: inherit;
background-image: initial;
background-image: revert;
background-image: revert-layer;
background-image: unset;
それぞれの背景画像は、キーワード none
または <image>
値として指定されます。
複数の背景画像を指定するには、複数の値をカンマで区切って指定してください。
値
アクセシビリティの考慮
ブラウザーは、背景画像に関する特別な情報を支援技術に提供しません。これは主に読み上げアプリにとって重要であり、読み上げアプリはその存在を告知しないため、ユーザーには何も伝えません。ページの全体的な目的を理解する上で重要な情報が画像に含まれている場合は、文書の中でその意味を記述した方が良いでしょう。
公式定義
初期値 | 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
<div>
<p class="catsandstars">This paragraph is full of cats<br />and stars.</p>
<p>This paragraph is not.</p>
<p class="catsandstars">Here are more cats for you.<br />Look at them!</p>
<p>And no more.</p>
</div>
CSS
p {
font-size: 1.5em;
color: #fe7f88;
background-image: none;
background-color: transparent;
}
div {
background-image: url("mdn_logo_only_color.png");
}
.catsandstars {
background-image: url("startransparent.gif"), url("catfront.png");
background-color: transparent;
}
結果
仕様書
Specification |
---|
CSS Backgrounds and Borders Module Level 3 # background-image |
ブラウザーの互換性
BCD tables only load in the browser