1 files changed, 151 insertions, 0 deletions
diff --git a/files/ja/web/css/background-attachment/index.md b/files/ja/web/css/background-attachment/index.md
new file mode 100644
index 0000000000..230923fd03
--- /dev/null
+++ b/files/ja/web/css/background-attachment/index.md
@@ -0,0 +1,151 @@
+---
+title: background-attachment
+slug: Web/CSS/background-attachment
+tags:
+  - CSS
+  - CSS Background
+  - CSS Property
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/background-attachment
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>background-attachment</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、背景画像の位置を{{glossary("Viewport", "ビューポート")}}の中で固定するか、包含ブロックと一緒にスクロールするかを設定します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/background-attachment.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css no-line-numbers notranslate">/* キーワード値 */
+background-attachment: scroll;
+background-attachment: fixed;
+background-attachment: local;
+
+/* グローバル値 */
+background-attachment: inherit;
+background-attachment: initial;
+background-attachment: unset;
+</pre>
+
+<p><code>background-attachment</code> プロパティは、以下に挙げた値のうちの一つで指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>fixed</code></dt>
+ <dd>背景はビューポートに対する相対位置で固定されます。要素がスクロール機構を持っていたとしても、背景画像は要素とともには動きません。 (これは {{cssxref("background-clip", "background-clip: text", "#text")}} とは両立できません)</dd>
+ <dt><code>local</code></dt>
+ <dd>背景は要素の内容に対する相対位置で固定されます。要素がスクロール機構を持っていた場合、背景画像は要素の内容とともにスクロールします。背景画像の描画エリアと配置エリアは、それらを囲む境界ではなく、要素のスクロール可能なエリアを基準にします。</dd>
+ <dt><code>scroll</code></dt>
+ <dd>背景は要素自身に対する相対位置で固定され、内容と共にスクロールしません。 (要素の境界に対して効果的に張り付きます。)</dd>
+</dl>
+
+<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="Simple_example" name="Simple_example">単純な例</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;
+  There were doors all round the hall, but they were all locked; and when
+  Alice had been all the way down one side and up the other, trying every
+  door, she walked sadly down the middle, wondering how she was ever to
+  get out again.
+&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush:css; highlight:[3]; notranslate">p {
+  background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif");
+  background-attachment: fixed;
+}
+</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample("Simple_example")}}</p>
+
+<h3 id="Multiple_background_images" name="Multiple_background_images">複数の背景画像</h3>
+
+<p>このプロパティは複数の背景画像に対応しており、それぞれの背景画像に異なる <code>&lt;attachment&gt;</code> をカンマ区切りで指定できます。それぞれの画像には先頭から順番に <code>&lt;attachment&gt;</code> の値が適用されます。</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;
+  There were doors all round the hall, but they were all locked; and when
+  Alice had been all the way down one side and up the other, trying every
+  door, she walked sadly down the middle, wondering how she was ever to
+  get out again.
+
+  Suddenly she came upon a little three-legged table, all made of solid
+  glass; there was nothing on it except a tiny golden key, and Alice's
+  first thought was that it might belong to one of the doors of the hall;
+  but, alas! either the locks were too large, or the key was too small,
+  but at any rate it would not open any of them. However, on the second
+  time round, she came upon a low curtain she had not noticed before, and
+  behind it was a little door about fifteen inches high: she tried the
+  little golden key in the lock, and to her great delight it fitted!
+&lt;/p&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush:css; highlight:[3]; notranslate">p {
+  background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"),
+      url("https://mdn.mozillademos.org/files/12059/startransparent.gif");
+  background-attachment: fixed, scroll;
+  background-repeat: no-repeat, repeat-y;
+}</pre>
+
+<h4 id="Result_2" name="Result_2">結果</h4>
+
+<p>{{EmbedLiveSample("Multiple_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', '#the-background-attachment', 'background-attachment')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>複数の背景画像と <code>local</code> に対応するために一括指定プロパティを拡張。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-attachment', 'background-attachment')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>重要な変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#background-attachment', 'background-attachment')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>重要な変更なし。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat("css.properties.background-attachment")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds">複数の背景画像を使う</a></li>
+</ul>