mozilla

Revision 21275 of background-attachment

  • Revision slug: CSS/background-attachment
  • Revision title: background-attachment
  • Revision id: 21275
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment 6 words removed

Revision Content

{{ CSSRef() }}

Summary

If a {{ Cssxref("background-image") }} is specified, background-attachment determines whether that image's position is fixed within the viewport, or scrolls along with its containing block.

  • {{ Xref_cssinitial() }}: scroll
  • Applies to: all elements
  • {{ Xref_cssinherited() }}: no
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: as specified

Syntax

background-attachment:  <attachment>[, <attachment>]*

Where:

<attachment>
scroll | fixed | local

{{ gecko_minversion_note("1.9.2", "Gecko 1.9.2 introduced support for multiple background images; prior to 1.9.2, only one <attachment> </attachment>value is supported.") }}

Values

scroll
If scroll is specified, the background image will scroll within the viewport along with the block the image is contained within.
fixed
If fixed is specified, the background image will not scroll with its containing element, instead remaining stationary within the viewport.
local
{{ unimplemented_inline() }} in Gecko (Firefox)

Examples

{{ CSSRefExampleLink("background-attachment") }}

body {
	background-image: url("images/cartooncat.png");
	background-attachment: fixed;
}

Multiple background image support

Gecko 1.9.2 supports multiple background images. You can specify a different <attachment> for each background, separated by commas:

body {
  background-image: url("img1.png"), url("img2.png");
  background-attachment: scroll, fixed;
} 

Each image is matched with the corresponding attachment type, from first specified to last.

Browser Compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 {{ CompatGeckoDesktop("1.0") }} 4.0 3.5 1.0
Multiple backgrounds 1.0 {{ CompatGeckoDesktop("1.9.2") }} 9.0 10.5 1.3
local 4.0 {{ CompatNo() }} 9.0 10.5 5.0
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 2.1 {{ CompatGeckoMobile("1.9.2") }} {{ CompatUnknown() }} 10.0 3.2
Multiple backgrounds 2.1 {{ CompatGeckoMobile("1.9.2") }} {{ CompatUnknown() }} 10.0 3.2
local {{ CompatUnknown() }} {{ CompatNo() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

Specifications

See also

{{ languages( { "de": "de/CSS/background-attachment", "es": "es/CSS/background-attachment", "fr": "fr/CSS/background-attachment", "it": "it/CSS/background-attachment", "pl": "pl/CSS/background-attachment" } ) }}

Revision Source

<p>{{ CSSRef() }}</p>
<h3>Summary</h3>
<p>If a {{ Cssxref("background-image") }} is specified, <code>background-attachment</code> determines whether that image's position is fixed within the viewport, or scrolls along with its containing block.</p>
<ul> <li>{{ Xref_cssinitial() }}: scroll</li> <li>Applies to: all elements</li> <li>{{ Xref_cssinherited() }}: no</li> <li>Media: {{ Xref_cssvisual() }}</li> <li>{{ Xref_csscomputed() }}: as specified</li>
</ul>
<h3>Syntax</h3>
<pre>background-attachment:  &lt;attachment&gt;[, &lt;attachment&gt;]*
</pre>
<p>Where:</p>
<dl> <dt>&lt;attachment&gt;</dt> <dd><code>scroll | fixed | local</code></dd>
</dl>
<p>{{ gecko_minversion_note("1.9.2", "Gecko 1.9.2 introduced support for multiple background images; prior to 1.9.2, only one <code><attachment> </attachment></code>value is supported.") }}</p>
<h3>Values</h3>
<dl> <dt>scroll</dt> <dd>If <code>scroll</code> is specified, the background image will scroll within the viewport along with the block the image is contained within.</dd> <dt>fixed</dt> <dd>If <code>fixed</code> is specified, the background image will not scroll with its containing element, instead remaining stationary within the viewport.</dd> <dt>local</dt> <dd>{{ unimplemented_inline() }} in Gecko (Firefox)</dd>
</dl>
<h3>Examples</h3>
<p>{{ CSSRefExampleLink("background-attachment") }}</p>
<pre>body {
	background-image: url("images/cartooncat.png");
	background-attachment: fixed;
}
</pre>
<h4>Multiple background image support</h4>
<p>Gecko 1.9.2 supports multiple background images. You can specify a different <code>&lt;attachment&gt;</code> for each background, separated by commas:</p>
<pre>body {
  background-image: url("img1.png"), url("img2.png");
  background-attachment: scroll, fixed;
} 
</pre>
<p>Each image is matched with the corresponding attachment type, from first specified to last.</p>
<h3 name="Browser_Compatibility">Browser Compatibility</h3>
<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>{{ CompatNo() }} <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=483446" title="https://bugzilla.mozilla.org/show_bug.cgi?id=483446"></a></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>{{ CompatNo() }} <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=483446" title="https://bugzilla.mozilla.org/show_bug.cgi?id=483446"></a></td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> </tbody> </table>
</div>
<h3>Specifications</h3>
<ul> <li><a class="external" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-attachment">CSS 2.1 Colors and Backgrounds #background-attachment</a></li> <li><a class="external" href="http://www.w3.org/TR/css3-background/#the-background-attachment" title="http://www.w3.org/TR/css3-background/#the-background-attachment">CSS 3 Backgrounds and Borders #background-attachment </a></li>
</ul>
<h3>See also</h3>
<ul> <li>{{ CSS_Reference:Background() }}</li> <li><a href="/en/CSS/Multiple_backgrounds" title="en/CSS/Multiple backgrounds">Multiple backgrounds</a></li> <li><a class=" external" href="http://www.quirksmode.org/css/background.html" title="http://www.quirksmode.org/css/background.html">Quirksmode background compatibility</a></li>
</ul>
<p>{{ languages( { "de": "de/CSS/background-attachment", "es": "es/CSS/background-attachment", "fr": "fr/CSS/background-attachment", "it": "it/CSS/background-attachment", "pl": "pl/CSS/background-attachment" } ) }}</p>
Revert to this revision