CSS Advanced

CSS Background Attachment

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:

         <!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 :

« Previous Next »