Setting the Attachment for the Background

When you apply a background to an element that has a viewport(with scrollbar), you can specify how the background is attached to the content.

The background-attachment Values:

ValueDescription
fixedfixed to the viewport, the background doesn't move during scrolling.
localattached to the content, the background moves with the content when scrolled.
scrollfixed to the element and does not scroll with the content.
 
<!DOCTYPE HTML> 
<html> 
    <head> 
        <title>Example</title> 
        <style type="text/css"> 
        textarea { 
            border: medium solid black; 
            background-image: url(http://java2s.com/Book/HTML-CSSImages/star.png); 
            background-size: 60px 60px; 
            background-repeat: repeat; 
            background-attachment: scroll; 
        } 
        </style> 
    </head> 
    <body> 
        <p> 
            <textarea rows="8" cols="30"> 
            HyperText Markup Language (HTML) is the main markup language for 
            displaying web pages and other information that can be displayed 
            in a web browser(From From Wikipedia, the free encyclopedia).
            </textarea> 
        </p> 
    </body> 
</html>
  
Click to view the demo
Home 
  HTML CSS Book 
    CSS  

Background:
  1. Setting Element Backgrounds
  2. Setting the Background Color and Image
  3. Setting the Background Image Size
  4. Setting the Background Image Position
  5. Setting the Attachment for the Background
  6. Setting the Background Image Origin
  7. Using the background Shorthand Property
Related: