Background-attachment

The background-attachment property defines if the background image is fixed or it will scroll along with the rest of the page.

CSS Syntax

background-attachment: scroll | fixed | local | initial | inherit;

Let's see an example:

We will fix the background image in the first example. If you notice, even if we scroll down the page, background image follows our move and keep its place.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-image: url("/uploads/media/default/0001/01/71d38a31907e8c1c64d52d021fd3b9a02ab5b0ce.jpeg");
        background-repeat: no-repeat;
        background-attachment: fixed;
      }
    </style>
  </head>
  <body>
    <h2>Background attachment</h2>
    <p>Lorem ipsum dolor sit amet, <br/>
      consectetur adipiscing elit. Phasellus adipiscing tincidunt justo,<br/>
      sed consequat nisi ultrices a.</p><br/><br/>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br/>Phasellus adipiscing tincidunt justo, <br/>sed
      consequat nisi ultrices a.
    
      <br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus adipiscing tincidunt justo, sed <br/>consequat
      nisi ultrices a.<br/>
    
      <br/>Lorem ipsum dolor sit amet, <br/>consectetur adipiscing elit. Phasellus adipiscing tincidunt justo, sed consequat
      nisi ultrices a<br/>
    
      <br/>Lorem ipsum dolor sit amet, <br/>consectetur adipiscing elit. Phasellus adipiscing tincidunt justo, sed consequat
      nisi ultrices a<br/>
    
      <br/><br/>Lorem ipsum dolor sit amet, <br/>consectetur adipiscing elit. Phasellus adipiscing tincidunt justo, sed
      consequat nisi ultrices a<br/>
    
      <br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus adipiscing tincidunt justo, sed consequat nisi
      ultrices a<br/>
    
      <br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus adipiscing tincidunt justo, sed consequat nisi
      ultrices a<br/>
    
      <br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus adipiscing tincidunt justo, sed consequat nisi
      ultrices a<br/></p>
    <strong>If you do not see any scrollbars, try to resize the browser window or add some text.</strong>
  </body>
</html>

Here is the result:




Let's see another example:

You will see another example for background-attachment property of CSS. We will say "scroll" value this time and you can see that the background image doesn't follow when we scroll the page and stays up.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-image: url("/uploads/media/default/0001/01/71d38a31907e8c1c64d52d021fd3b9a02ab5b0ce.jpeg");
        background-repeat: no-repeat;
        background-attachment: scroll;
      }
    </style>
  </head>
  <body>
    <h2>Background attachment</h2>
    <p>Lorem ipsum dolor sit amet, <br/>consectetur adipiscing elit. Phasellus adipiscing tincidunt justo, <br/>sed
      consequat nisi ultrices a.<br/><br/>
    
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br/>Phasellus adipiscing tincidunt justo, <br/>sed consequat
      nisi ultrices a.
    
      <br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus adipiscing tincidunt justo, sed <br/>consequat
      nisi ultrices a.<br/>
    
      <br/>Lorem ipsum dolor sit amet, <br/>consectetur adipiscing elit. Phasellus adipiscing tincidunt justo, sed consequat
      nisi ultrices a<br/>
    
      <br/>Lorem ipsum dolor sit amet, <br/>consectetur adipiscing elit. Phasellus adipiscing tincidunt justo, sed consequat
      nisi ultrices a<br/>
    
      <br/><br/>Lorem ipsum dolor sit amet, <br/>consectetur adipiscing elit. Phasellus adipiscing tincidunt justo, sed
      consequat nisi ultrices a<br/>
    
      <br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus adipiscing tincidunt justo, sed consequat nisi
      ultrices a<br/>
    
      <br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus adipiscing tincidunt justo, sed consequat nisi
      ultrices a<br/>
    
      <br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus adipiscing tincidunt justo, sed consequat nisi
      ultrices a<br/></p>
  </body>
</html>

Here is the result:




Property Values

Value Descriptions
scroll It makes background image scroll along with the element. It is default value.
fixed It makes background fixed with regard to the viewport.
local It makes background scroll along with the element's contents.
initial It sets the property to its default value.
inherit It inherits the property from its parents element.