path: root/files/ja/web/css/background-image/index.html

---
title: background-image
slug: Web/CSS/background-image
tags:
  - Background
  - CSS
  - CSS Background
  - CSS Property
  - CSS プロパティ
  - CSS 背景と境界
  - Reference
  - background-image
  - 'recipe:css-property'
  - リファレンス
translation_of: Web/CSS/background-image
---
<p>{{CSSRef}}</p>

<p><strong><code>background-image</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素に1つ以上の背景画像を設定します。</p>

<div>{{EmbedInteractiveExample("pages/css/background-image.html")}}</div>

<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>

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

<p>要素の<a href="/ja/docs/Web/CSS/border">境界</a>は背景画像よりも上、 {{cssxref("background-color")}} は背景画像より下に描画されます。画像がボックスとその境界に対し相対的にどう描画されるかは、 {{cssxref("background-clip")}} および {{cssxref("background-origin")}} プロパティによって定義されます。</p>

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

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

<h2 id="Syntax" name="Syntax">構文</h2>

<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:
  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>

<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>

<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>

<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>

<p>{{cssinfo}}</p>

<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>

<pre class="syntaxbox notranslate">{{csssyntax}}</pre>

<h2 id="Examples" name="Examples">例</h2>

<h3 id="Layering_background_images" name="Layering_background_images">背景画像の重ね合わせ</h3>

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

<h4 id="HTML">HTML</h4>

<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>

<h4 id="CSS">CSS</h4>

<pre class="brush: css notranslate">p {
  font-size: 1.5em;
  color: #FE7F88;
  background-image: none;
  background-color: transparent;
}

div {
  background-image:
      url("https://mdn.mozillademos.org/files/6457/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");
  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 class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>

<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>