CSS/Properties/background-attachment

From W3C Wiki
Jump to: navigation, search

background-attachment

The background-attachment property specifies whether a background image is fixed with regard to the viewport or scrolls along with the containing block.

Description

Values scroll | fixed | inherit
Initial value scroll
Applies to All elements
Inherited No


Point, Note

  • Only when the background image is specified, this property is effective.


Values

  • scroll
    If specified, the background image scrolls with the element.


  • fixed
    If specified, the background image does not scrolls with the element.


  • inherit
    Takes the same specified value as the property for the element's parent.


Example

Example A

[style.css]

 body {
   background-image: url("images/bg_big.png");
   background-attachment: scroll;
   background-repeat: no-repeat;
 }

[index.html]

  <body>
    <p>This is a paragraph</p>
  </body>

Csslist2 background-attachment s.png

Example B

[style.css]

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

[index.html]

  <body>
    <p>This is a paragraph</p>
  </body>

Csslist2 background-attachment f.png


CSS Reference

The CSS specification defines the background-attachment property in 14.2.1 Background properties.