background-attachment

  • Revision slug: CSS/background-attachment
  • Revision title: background-attachment
  • Revision id: 21260
  • Created:
  • Creator: BijuGC
  • Is current revision? No
  • Comment /* Summary */

Revision Content

{{template.CSSRef()}}

Summary

If a {{template.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.

  • {{template.Xref_cssinitial()}}: scroll
  • Applies to: all elements
  • {{template.Xref_cssinherited()}}: no
  • Percentages: N/A
  • Media: {{template.Xref_cssvisual()}}
  • {{template.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

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

body {
	background-image: url("images/cartooncat.png");
	background-position: bottom left;
	background-attachment: fixed;
	background-repeat: no-repeat;
}

Specifications

Browser Compatibility

Browser Compatibility

Browser Lowest Version
Internet Explorer 4
Firefox 1
Netscape 6
Opera 3.5

See Also

{{wiki.template('CSS_Reference:Background')}}

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

Revision Source

<p> 
{{template.CSSRef()}}
</p>
<h3 name="Summary"> Summary </h3>
<p>If a {{template.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> {{template.Xref_cssinitial()}}: scroll
</li><li> Applies to: all elements
</li><li> {{template.Xref_cssinherited()}}: no
</li><li> Percentages: N/A
</li><li> Media: {{template.Xref_cssvisual()}}
</li><li> {{template.Xref_csscomputed()}}: as specified
</li></ul>
<h3 name="Syntax"> Syntax </h3>
<pre class="eval">background-attachment: scroll | fixed | inherit
</pre>
<h3 name="Values"> 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 name="Examples"> Examples </h3>
<p>{{template.CSSRefExampleLink("background-attachment")}}
</p>
<pre>body {
	background-image: url("images/cartooncat.png");
	background-position: bottom left;
	background-attachment: fixed;
	background-repeat: no-repeat;
}
</pre>
<h3 name="Specifications"> Specifications </h3>
<ul><li> <a class="external" href="http://www.w3.org/TR/CSS1#background-attachment">CSS 1</a>
</li><li> <a class="external" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-attachment">CSS 2.1</a>
</li><li> <a class="external" href="http://www.w3.org/TR/2005/WD-css3-background-20050216/#background-attachment">CSS 3</a>
</li></ul>
<h3 name="Browser_Compatibility"> Browser Compatibility </h3>
<h3 name="Browser_Compatibility_2"> Browser Compatibility </h3>
<table class="standard-table">
  <tbody><tr>
    <th>Browser</th>
    <th>Lowest Version</th>
  </tr>
  <tr>
    <td>Internet Explorer</td>
    <td>4</td>
  </tr>
  <tr>
    <td>Firefox</td>
    <td>1</td>
  </tr>
  <tr>
    <td>Netscape</td>
    <td>6</td>
  </tr>
  <tr>
    <td>Opera</td>
    <td>3.5</td>
  </tr>
</tbody></table>
<h3 name="See_Also"> See Also </h3>
<p>{{wiki.template('CSS_Reference:Background')}}
</p>
<div class="noinclude">
</div>
{{ wiki.languages( { "fr": "fr/CSS/background-attachment", "it": "it/CSS/background-attachment", "pl": "pl/CSS/background-attachment" } ) }}
Revert to this revision