CSS Background Attachment


« Previous Next »

CSS background-attachment

The background-attachment property specifies whether the background image should scroll or be fixed (will not scroll with the rest of the page):

Example

Specify that the background image should be fixed:/p> 

        
          <!DOCTYPE html>
          <html>
          <head>
          <style>
          body {
            background-image: url("img_tree.png");
            background-repeat: no-repeat;
            background-position: right top;
            margin-right: 200px;
            background-attachment: fixed;
          }
          </style>
          </head>
          <body>
          
          <h1>The background-attachment Property</h1>
          
          <p>The background-attachment property specifies whether the background image should 
             scroll or be fixed (will not scroll with the rest of 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>
          <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>
Result:
Example Image