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

---
title: background
slug: Web/CSS/background
tags:
  - CSS
  - CSS Background
  - CSS Property
  - Reference
  - 'recipe:css-shorthand-property'
translation_of: Web/CSS/background
---
<p>{{CSSRef("CSS Background")}}</p>

<p><span class="seoSummary"><strong><code>background</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定</a>プロパティで、色、画像、原点と寸法、反復方法など、背景に関するすべてのスタイルプロパティを一括で設定します。</span></p>

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

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

<h2 id="Constituent_properties" name="Constituent_properties">構成要素のプロパティ</h2>

<p>このプロパティは以下の CSS プロパティの一括指定です。</p>

<ul>
 <li>{{cssxref("background-attachment")}}</li>
 <li>{{cssxref("background-clip")}}</li>
 <li>{{cssxref("background-color")}}</li>
 <li>{{cssxref("background-image")}}</li>
 <li>{{cssxref("background-origin")}}</li>
 <li>{{cssxref("background-position")}}</li>
 <li>{{cssxref("background-repeat")}}</li>
 <li>{{cssxref("background-size")}}</li>
</ul>

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

<pre class="brush: css no-line-numbers notranslate">/* &lt;background-color&gt; を使用 */
background: green;

/* &lt;bg-image&gt; と &lt;repeat-style&gt; を使用 */
background: url("test.jpg") repeat-y;

/* &lt;box&gt; と &lt;background-color&gt; を使用 */
background: border-box red;

/* 単一の画像、中央寄せかつ縮小 */
background: no-repeat center/80% url("../img/image.png");
</pre>

<p><code>background</code> プロパティは1つまたは複数の背景レイヤーをカンマで区切って指定します。</p>

<p>それぞれのレイヤーの構文は以下の通りです。</p>

<ul>
 <li>それぞれのレイヤーは、以下の値をそれぞれ0～1回含めることができます。
  <ul>
   <li><code><a href="#&lt;attachment>">&lt;attachment&gt;</a></code></li>
   <li><code><a href="#&lt;bg-image>">&lt;bg-image&gt;</a></code></li>
   <li><code><a href="#&lt;position>">&lt;position&gt;</a></code></li>
   <li><code><a href="#&lt;bg-size>">&lt;bg-size&gt;</a></code></li>
   <li><code><a href="#&lt;repeat-style>">&lt;repeat-style&gt;</a></code></li>
  </ul>
 </li>
 <li><code><a href="#&lt;bg-size>">&lt;bg-size&gt;</a></code> の値は <code><a href="#&lt;position>">&lt;position&gt;</a></code> の直後に '/' の文字で区切って含めなければなりません。例: "<code>center/80%</code>"</li>
 <li><code><a href="#&lt;box>">&lt;box&gt;</a></code> の値は0～2回含めることができます。1回の場合は {{cssxref("background-origin")}} と {{cssxref("background-clip")}} の両方に設定されます。2回の場合は、1つ目は {{cssxref("background-origin")}} に、2つ目は {{cssxref("background-clip")}} に設定されます。</li>
 <li><code><a href="#&lt;background-color>">&lt;background-color&gt;</a></code> の値は最後のレイヤーの指定でのみ含めることができます。</li>
</ul>

<h3 id="Values" name="Values">値</h3>

<dl>
 <dt id="&lt;attachment>"><code>&lt;attachment&gt;</code></dt>
 <dd>{{cssxref("background-attachment")}} を参照</dd>
 <dt id="&lt;box>"><code>&lt;box&gt;</code></dt>
 <dd>{{cssxref("background-clip")}} 及び {{cssxref("background-origin")}} を参照</dd>
 <dt id="&lt;background-color>"><code>&lt;background-color&gt;</code></dt>
 <dd>{{cssxref("background-color")}} を参照</dd>
 <dt id="&lt;bg-image>"><code>&lt;bg-image&gt;</code></dt>
 <dd>{{Cssxref("background-image")}} を参照</dd>
 <dt id="&lt;position>"><code>&lt;position&gt;</code></dt>
 <dd>{{cssxref("background-position")}} を参照</dd>
 <dt id="&lt;repeat-style>"><code>&lt;repeat-style&gt;</code></dt>
 <dd>{{cssxref("background-repeat")}} を参照</dd>
 <dt id="&lt;bg-size>"><code>&lt;bg-size&gt;</code></dt>
 <dd>{{cssxref("background-size")}} を参照。</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>

{{csssyntax}}

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

<h3 id="Setting_backgrounds_with_color_keywords_and_images" name="Setting_backgrounds_with_color_keywords_and_images">色キーワードと画像による背景の設定</h3>

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

<pre class="brush: html notranslate">&lt;p class="topbanner"&gt;
  Starry sky&lt;br/&gt;
  Twinkle twinkle&lt;br/&gt;
  Starry sky
&lt;/p&gt;
&lt;p class="warning"&gt;Here is a paragraph&lt;p&gt;</pre>

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

<pre class="brush:css' highlight:[2,6]; notranslate">.warning {
  background: pink;
}

.topbanner {
  background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #99f repeat-y fixed;
}
</pre>

<h4 id="Result" name="Result">結果</h4>

<p>{{EmbedLiveSample("Setting_backgrounds_with_color_keywords_and_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', '#the-background', 'background')}}</td>
   <td>{{Spec2('CSS3 Backgrounds')}}</td>
   <td>一括指定プロパティが拡張され、複数の背景と新しい {{cssxref("background-size")}}, {{cssxref("background-origin")}}, {{cssxref("background-clip")}} プロパティに対応した。</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'colors.html#propdef-background', 'background')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>重要な変更なし</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS1', '#background', 'background')}}</td>
   <td>{{Spec2('CSS1')}}</td>
   <td>初回定義</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

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

<p>{{Compat("css.properties.background")}}</p>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li>{{cssxref("box-decoration-break")}}</li>
 <li><a href="/ja/docs/Web/CSS/Using_CSS_gradients">グラデーションの使用</a></li>
 <li><a href="/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds">複数の背景の使用</a></li>
</ul>