CSS Property background-attachment

The background-attachment property specifies whether to scroll or fix a background image with the rest of the page.

Summary

Initial value: scroll
Inherited: no
CSS Version: CSS1
JavaScript syntax: object.style.backgroundAttachment="fixed"
Animatable: no

CSS Syntax

background-attachment: scroll|fixed|local;

Property Values

scroll: Default. The background scrolls with the element.
fixed: The background is fixed with the viewport.
local: The background scrolls with the element's contents.

Browser compatibility


`background-attachment`	Yes	Yes	Yes	Yes	Yes

Example

<!DOCTYPE html>
<html>
<head>
<style>
body  {<!-- www .j ava2s  .c  o  m-->
    background-image: url('http://placehold.it/200x200');
    background-repeat: no-repeat;
    background-attachment: fixed;
}
</style>
</head>
<body>

<p>The background-image is fixed. Try to scroll down the page.</p>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<p>The background-image is fixed. Try to scroll down the page.</p>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<p>The background-image is fixed. Try to scroll down the page.</p>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<p>The background-image is fixed. Try to scroll down the page.</p>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<p>The background-image is fixed. Try to scroll down the page.</p>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<p>The background-image is fixed. Try to scroll down the page.</p>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<p>The background-image is fixed. Try to scroll down the page.</p>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<p>The background-image is fixed. Try to scroll down the page.</p>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<p>The background-image is fixed. Try to scroll down the page.</p>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<p>The background-image is fixed. Try to scroll down the page.</p>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>

</body>
</html>

Click to view the demo

Example 2

The following code shows the textarea element used with the border-attachment property.

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
textarea {<!--from w  w  w.java 2s. com-->
  border: medium solid black;
  background-color: lightgray;
  background-image: url(http://www.java2s.com/style/download.png);
  background-size: 60px 60px;
  background-repeat: repeat;
  background-attachment: scroll;
}
</style>
</head>
<body>
  <p>
    <textarea rows="8" cols="30">
    This is a test.This is a test.This is a test.This is a test.
    This is a test.This is a test.This is a test.This is a test.
    This is a test.This is a test.This is a test.This is a test.
    This is a test.This is a test.This is a test.This is a test.
    This is a test.This is a test.This is a test.This is a test.
    This is a test.This is a test.This is a test.This is a test.
    This is a test.This is a test.This is a test.This is a test.
    This is a test.This is a test.This is a test.This is a test.
    </textarea>
  </p>
</body>
</html>

Click to view the demo