background-attachment - HTML CSS CSS Property

HTML CSS examples for CSS Property:background-attachment

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. background-attachment

Description

The background-attachment CSS property controls if the background image scrolls with the document, or remains fixed.

The following table summarizes the background-attachment property

Item Value
Default value: scroll
Applies to:All elements
Inherited: No
Animatable: No.

Syntax

The syntax of the background-attachment property is defined as follows: 

background-attachment:      scroll | fixed | initial | inherit

Property Values

The following table describes the values of background-attachment property.

Value Description
scroll The default value. The background image scrolls within the viewport along with its containing element.
fixed The background image doesn't move with the element.
local The background scrolls along with the element's contents.
initial Sets this property to its default value.
inherit takes the value from its parent element background-attachment property.

The example below shows the background-attachment property.

Example

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS background-attachment property</title>
  <style type="text/css">
    body {<!--from  w  w  w  .  j  a  v  a  2s  .  c  o  m-->
        width: 250;
        height: 200px;
        overflow: scroll;
        background-image: url("https://www.java2s.com/style/demo/Opera.png");
        background-repeat: no-repeat;
        background-position: center;
        background-attachment: fixed;
    }
  </style>
 </head>
 <body>
  <h1>The background-image is fixed.</h1>
  <p>Scroll down the page to see the effect.</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc neque. In hac habitasse platea dictumst. Pellentesque ultrices. Donec nunc metus, aliquam sit amet, aliquam in, luctus ac, odio. Aenean orci velit, elementum ac, egestas pellentesque, facilisis non, turpis. Quisque dolor. Vestibulum in massa in lectus hendrerit condimentum.</p>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc neque. In hac habitasse platea dictumst. Pellentesque ultrices. Donec nunc metus, aliquam sit amet, aliquam in, luctus ac, odio. Aenean orci velit, elementum ac, egestas pellentesque, facilisis non, turpis. Quisque dolor. Vestibulum in massa in lectus hendrerit condimentum.</p>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc neque. In hac habitasse platea dictumst. Pellentesque ultrices. Donec nunc metus, aliquam sit amet, aliquam in, luctus ac, odio. Aenean orci velit, elementum ac, egestas pellentesque, facilisis non, turpis. Quisque dolor. Vestibulum in massa in lectus hendrerit condimentum.</p>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc neque. In hac habitasse platea dictumst. Pellentesque ultrices. Donec nunc metus, aliquam sit amet, aliquam in, luctus ac, odio. Aenean orci velit, elementum ac, egestas pellentesque, facilisis non, turpis. Quisque dolor. Vestibulum in massa in lectus hendrerit condimentum.</p>
 </body>
</html>

Related Tutorials