Want to share your CSS expertise with others? Apply to the MDN Fellowship by April 1! http://mzl.la/MDNFellowship

mozilla

Revision 21262 of background-attachment

  • Revision slug: CSS/background-attachment
  • Revision title: background-attachment
  • Revision id: 21262
  • Created:
  • Creator: Jürgen Jeka
  • Is current revision? No
  • Comment CSS3 link updated; 34 words added, 32 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:  scroll | fixed | inherit

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.

Examples

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

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

Specifications

Browser Compatibility

Browser Lowest Version
Internet Explorer 3.0
Firefox (Gecko) 1.0 (1.0)
Opera 3.5
Safari (WebKit) 1.0 (85)

See Also

{{ CSS_Reference:Background() }}

{{ languages( { "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:  scroll | fixed | inherit
</pre>
<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>
</dl>
<h3>Examples</h3>
<p>{{ CSSRefExampleLink("background-attachment") }}</p>
<pre>body {
	background-image: url("images/cartooncat.png");
	background-attachment: fixed;
}
</pre>
<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>Working draft</li>
</ul>
<h3>Browser Compatibility</h3>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>Lowest Version</th> </tr> <tr> <td>Internet Explorer</td> <td>3.0</td> </tr> <tr> <td>Firefox (Gecko)</td> <td>1.0 (1.0)</td> </tr> <tr> <td>Opera</td> <td>3.5</td> </tr> <tr> <td>Safari (WebKit)</td> <td>1.0 (85)</td> </tr> </tbody>
</table>
<h3>See Also</h3>
<p>{{ CSS_Reference:Background() }}</p>
<p>{{ languages( { "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