initial commit

1 files changed, 214 insertions, 0 deletions

diff --git a/files/pt-br/web/css/background-attachment/index.html b/files/pt-br/web/css/background-attachment/index.html
new file mode 100644
index 0000000000..977f59e4e7
--- /dev/null
+++ b/files/pt-br/web/css/background-attachment/index.html
@@ -0,0 +1,214 @@
+---
+title: background-attachment
+slug: Web/CSS/background-attachment
+translation_of: Web/CSS/background-attachment
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Resumo">Resumo</h2>
+
+<p>Se um {{cssxref("background-image")}} é especificado, a propriedade <a href="/en-US/docs/CSS" title="CSS">CSS</a> <strong><code>background-attachment</code></strong> determina se aquela posição da imagem é fixa com o viewport, ou se irá rolar juntamente com o seu bloco.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="brush: css">background-attachment: scroll;
+background-attachment: fixed;
+background-attachment: local;
+
+background-attachment: inherit;
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>fixed</code></dt>
+ <dd>Essa chave significa que o background é fixo em relação ao viewport. Mesmo que um elemento tenha um mecanismo de rolar, o  background ‘fixed’ não movimenta com o elemento.</dd>
+ <dt><code>local</code></dt>
+ <dd>Essa chave significa que o background é fixo em relação ao conteúdo do elemento: ise ele tem um mecanismo de rolar, o background rola com o conteúdo do elemento, e a área pintada e o posicionamento do background são relativos à área de rolagem do elemento ao invés da borda de fronteira deles.</dd>
+ <dt><code>scroll</code></dt>
+ <dd>Essa chave significa que o background é fixo em relação ao elemento em si e não rola com seu conteúdo. (É efetivamente ligado à borda do elemento.)</dd>
+ <dt>
+ <h3 id="Formal_syntax">Formal syntax</h3>
+ </dt>
+</dl>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Examples" name="Examples">Exemplos</h2>
+
+<h3 id="Exemplo_simpes">Exemplo simpes</h3>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush:css; highlight:[3];">p {
+  background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif");
+  background-attachment: fixed;
+}
+</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&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="Resultado">Resultado</h4>
+
+<p>{{EmbedLiveSample("Simple_example")}}</p>
+
+<h3 id="Suporte_de_múltiplas_imagem_de_background">Suporte de múltiplas imagem de background</h3>
+
+<p>Essa propriedade suporta múltiplas imagens de background. Você pode especificar <code>&lt;attachment&gt;</code> para cada background, separado por vírgulas. Cada imagem é combinada com o correspondente tipo de anexo, do primeiro especificado ao último.</p>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush:css; highlight:[3];">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="HTML_2">HTML</h4>
+
+<pre class="brush: html">&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="Resultado_2">Resultado</h4>
+
+<p>{{EmbedLiveSample("Multiple_background_image_support")}}</p>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#the-background-attachment', 'background-attachment')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>The shorthand property has been extended to support multiple backgrounds and the <code>local</code> value.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-attachment', 'background-attachment')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Mudança não significativa.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#background-attachment', 'background-attachment')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Mudança não significativa</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>4.0</td>
+   <td>3.5</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>Multiple backgrounds</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}</td>
+   <td>9.0</td>
+   <td>10.5</td>
+   <td>1.3</td>
+  </tr>
+  <tr>
+   <td><code>local</code></td>
+   <td>4.0</td>
+   <td>{{CompatGeckoDesktop("25")}}</td>
+   <td>9.0</td>
+   <td>10.5</td>
+   <td>5.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.1</td>
+   <td>{{CompatGeckoMobile("1.9.2")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.0</td>
+   <td>3.2</td>
+  </tr>
+  <tr>
+   <td>Multiple backgrounds</td>
+   <td>2.1</td>
+   <td>{{CompatGeckoMobile("1.9.2")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.0</td>
+   <td>3.2</td>
+  </tr>
+  <tr>
+   <td><code>local</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("25")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Multiple_backgrounds" title="CSS/Multiple backgrounds">Multiple backgrounds</a></li>
+</ul>