Setting the Attachment for the Background
Description
When adding a background to an element with a viewport, you can specify how the background is attached to the content.
The viewport is a concept for element which can scroll, for example, textarea element or body element.
You control the background attachment using the background-attachment property.
The following list describes the allowed values.
- fixed - The background is fixed to the viewport. The background doesn't move when the content is scrolled.
- local - The background is attached to the content. The background moves with the content when scrolled.
- scroll - The background is fixed to the element, and does not scroll with the content.
Example
The following code shows the textarea element used with the border-attachment property.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
textarea {<!--from ww w. j ava2s . co m-->
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>