CSS Backgrounds に関するプロパティの文書を更新

- 2021/11/12 時点の英語版に同期

1 files changed, 90 insertions, 116 deletions

diff --git a/files/ja/web/css/background-image/index.md b/files/ja/web/css/background-image/index.md
index 9c2da47f92..34d242f706 100644
--- a/files/ja/web/css/background-image/index.md
+++ b/files/ja/web/css/background-image/index.md
@@ -2,92 +2,93 @@
 title: background-image
 slug: Web/CSS/background-image
 tags:
-  - Background
   - CSS
-  - CSS Background
-  - CSS Property
+  - CSS 背景
   - CSS プロパティ
-  - CSS 背景と境界
-  - Reference
-  - background-image
-  - 'recipe:css-property'
   - リファレンス
+  - recipe:css-property
+browser-compat: css.properties.background-image
 translation_of: Web/CSS/background-image
 ---
-<p>{{CSSRef}}</p>
+{{CSSRef}}
 
-<p><strong><code>background-image</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素に1つ以上の背景画像を設定します。</p>
+**`background-image`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素に 1 つ以上の背景画像を設定します。
 
-<div>{{EmbedInteractiveExample("pages/css/background-image.html")}}</div>
+{{EmbedInteractiveExample("pages/css/background-image.html")}}
 
-<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+画像はお互いの上に積み重ねるコンテキストレイヤーに描画されます。最初に指定されたレイヤーが、ユーザーに対し最も手前にあるかのように描画されます。
 
-<p>画像はお互いの上に積み重ねるコンテキストレイヤーに描画されます。最初に指定されたレイヤーが、ユーザーに対し最も手前にあるかのように描画されます。</p>
+要素の[境界](/ja/docs/Web/CSS/border)は背景画像よりも上、 {{cssxref("background-color")}} は背景画像より下に描画されます。画像がボックスとその境界に対し相対的にどう描画されるかは、 {{cssxref("background-clip")}} および {{cssxref("background-origin")}} プロパティによって定義されます。
 
-<p>要素の<a href="/ja/docs/Web/CSS/border">境界</a>は背景画像よりも上、 {{cssxref("background-color")}} は背景画像より下に描画されます。画像がボックスとその境界に対し相対的にどう描画されるかは、 {{cssxref("background-clip")}} および {{cssxref("background-origin")}} プロパティによって定義されます。</p>
+指定された画像を描画することができない (例えば、指定された URI が指し示すファイルをロードできない) 場合、ブラウザーはその指定を `none` 値であるかのように処理します。
 
-<p>指定された画像を描画することができない (例えば、指定された URI が指し示すファイルをロードできない) 場合、ブラウザーはその指定を <code>none</code> 値であるかのように処理します。</p>
+> **Note:** たとえ画像が不透明で通常は色が表示されないとしても、ウェブ開発者は常に {{cssxref("background-color")}} を指定すべきです。例えばネットワークが切断された場合など、もし画像が読み込めなかったときに、背景色がフォールバックとして使われます。
 
-<div class="note"><strong>注:</strong> たとえ画像が不透明で通常は色が表示されないとしても、ウェブ開発者は常に {{cssxref("background-color")}} を指定すべきです。例えばネットワークが切断された場合など、もし画像が読み込めなかったときに、背景色がフォールバックとして使われます。</div>
+## 構文
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+それぞれの背景画像は、キーワード `none` または {{cssxref("&lt;image&gt;")}} 値として指定されます。
 
-<p>それぞれの背景画像は、キーワード <code><a href="#none">none</a></code> または {{cssxref("&lt;image&gt;")}} 値として指定されます。</p>
+複数の背景画像を指定するには、複数の値をカンマで区切って指定してください。
 
-<p>複数の背景画像を指定するには、複数の値をカンマで区切って指定してください。</p>
-
-<pre class="brush: css no-line-numbers notranslate">background-image:
+```css
+background-image:
   linear-gradient(to bottom, rgba(255,255,0,0.5), rgba(0,0,255,0.5)),
-  url('https://mdn.mozillademos.org/files/7693/catfront.png');</pre>
+  url('catfront.png');
+
+/* グローバル値 */
+background-image: inherit;
+background-image: initial;
+background-image: revert;
+background-image: unset;
+```
 
-<h3 id="Values" name="Values">値</h3>
+### 値
 
-<dl>
- <dt id="none"><code>none</code></dt>
- <dd>画像を用いないことを表すキーワード。</dd>
- <dt id="image"><code>&lt;image&gt;</code></dt>
- <dd>表示する背景を指し示す {{cssxref("&lt;image&gt;")}}。<a href="/ja/docs/Web/Guide/CSS/Using_multiple_backgrounds">複数の背景</a>に対応している場合は、カンマ区切りで複数指定することができます。</dd>
-</dl>
+- `none`
+  - : 画像を用いないことを表すキーワード。
+- `<image>`
+  - : 表示する背景を記述する {{cssxref("&lt;image&gt;")}}。[複数の背景](/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds)に対応している場合は、カンマ区切りで複数指定することができます。
 
-<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2>
+## アクセシビリティの考慮
 
-<p>ブラウザーは、背景画像に関する特別な情報を支援技術に提供しません。これは主に読み上げアプリにとって重要であり、読み上げアプリはその存在を告知しないため、ユーザーには何も伝えません。ページの全体的な目的を理解する上で重要な情報が画像に含まれている場合は、文書の中でその意味を記述した方が良いでしょう。</p>
+ブラウザーは、背景画像に関する特別な情報を支援技術に提供しません。これは主に読み上げアプリにとって重要であり、読み上げアプリはその存在を告知しないため、ユーザーには何も伝えません。ページの全体的な目的を理解する上で重要な情報が画像に含まれている場合は、文書の中でその意味を記述した方が良いでしょう。
 
-<ul>
- <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">MDN "WCAG を理解する ― ガイドライン 1.1 の解説"</a></li>
- <li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html">Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0</a></li>
-</ul>
+- [MDN "WCAG を理解する ― ガイドライン 1.1 の解説"](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content)
+- [Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html)
 
-<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+## 公式定義
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+## 形式文法
 
 {{csssyntax}}
 
-<h2 id="Examples" name="Examples">例</h2>
+## 例
 
-<h3 id="Layering_background_images" name="Layering_background_images">背景画像の重ね合わせ</h3>
+<h3 id="Layering_background_images">背景画像の重ね合わせ</h3>
 
-<p>星の画像は一部透過となっており、猫の画像の上に重ねられている点に注意してください。</p>
+星の画像は一部透過となっており、猫の画像の上に重ねられている点に注意してください。
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html notranslate">&lt;div&gt;
-  &lt;p class="catsandstars"&gt;
-    This paragraph is full of cats&lt;br /&gt;and stars.
-  &lt;/p&gt;
-  &lt;p&gt;This paragraph is not.&lt;/p&gt;
-  &lt;p class="catsandstars"&gt;
-    Here are more cats for you.&lt;br /&gt;Look at them!
-  &lt;/p&gt;
-  &lt;p&gt;And no more.&lt;/p&gt;
-&lt;/div&gt;</pre>
+```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>
+```
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css notranslate">p {
+```css
+p {
   font-size: 1.5em;
   color: #FE7F88;
   background-image: none;
@@ -96,72 +97,45 @@ translation_of: Web/CSS/background-image
 
 div {
   background-image:
-      url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png");
+      url("mdn_logo_only_color.png");
 }
 
 .catsandstars {
   background-image:
-      url("https://mdn.mozillademos.org/files/11991/startransparent.gif"),
-      url("https://mdn.mozillademos.org/files/7693/catfront.png");
+      url("startransparent.gif"),
+      url("catfront.png");
   background-color: transparent;
 }
-</pre>
-
-<h4 id="Result" name="Result">結果</h4>
-
-<p>{{EmbedLiveSample('Layering_background_images')}}</p>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Backgrounds', '#background-image', 'background-image')}}</td>
-   <td>{{Spec2('CSS3 Backgrounds')}}</td>
-   <td>CSS2 Revision 1 と比べ、プロパティが複数の背景と任意の {{cssxref("&lt;image&gt;")}} CSS データ型をサポートするよう拡張されました。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-image', 'background-image')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>CSS1 と比べ、画像が固有の寸法を持たない場合、持つ場合の取り扱い方が明記されました。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#background-image', 'background-image')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<div>{{Compat("css.properties.background-image")}}</div>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li><a href="/ja/docs/Web/Guide/CSS/CSS_Image_Sprites">CSS イメージスプライト</a></li>
- <li>{{HTMLElement("img")}}</li>
- <li>画像に関するデータ型: {{cssxref("&lt;image&gt;")}}, {{cssxref("&lt;gradient&gt;")}}</li>
- <li>画像に関する関数:
-  <ul>
-   <li>{{cssxref("cross-fade")}}</li>
-   <li>{{cssxref("element")}}</li>
-   <li>{{cssxref("imagefunction", "image()")}}</li>
-   <li>{{cssxref("image-set")}}</li>
-   <li>{{cssxref("linear-gradient")}}</li>
-   <li>{{cssxref("radial-gradient")}}</li>
-   <li>{{cssxref("repeating-linear-gradient")}}</li>
-   <li>{{cssxref("repeating-radial-gradient")}}</li>
-   <li>{{cssxref("paint")}}</li>
-   <li>{{cssxref("url", "url()")}}</li>
-  </ul>
- </li>
-</ul>
+```
+
+#### 結果
+
+{{EmbedLiveSample('Layering_background_images')}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [CSS での画像スプライトの実装](/ja/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS)
+- {{HTMLElement("img")}}
+- 画像に関するデータ型: {{cssxref("&lt;image&gt;")}}, {{cssxref("&lt;gradient&gt;")}}
+- 画像に関する関数:
+
+  - {{cssxref("cross-fade()")}}
+  - {{cssxref("element()")}}
+  - {{cssxref("image/image()", "image()")}}
+  - {{cssxref("image/image-set()", "image-set()")}}
+  - {{cssxref("gradient/linear-gradient()", "linear-gradient()")}}
+  - {{cssxref("gradient/radial-gradient()", "radial-gradient()")}}
+  - {{cssxref("gradient/conic-gradient()", "conic-gradient()")}}
+  - {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}}
+  - {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}}
+  - {{cssxref("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}}
+  - {{cssxref("image/paint()", "paint()")}}
+  - {{cssxref("url()", "url()")}}