CSS background-attachment Property

CSS background-attachment Property


CSS Background-attachment
This property sets the background image to scroll or not to scroll with its associated element’s content. 
The default value is scroll, which sets the background to scroll with the associated content, typically text. 
The alternate value, fixed, is intended to make the background static while associated content such as text scrolls over the background. 
A value of inherit applies the value of this property from a containing parent element.
Syntax - 
background-attachment: scroll | fixed | inherit 
Now we will see the meaning of the values - 
1. scroll 
The background scrolls along with the element. This is the default.
2. fixed 
The background is fixed with regard to the viewport.
local The background scrolls along with the element's contents.
3. initial 
Set this property to its default value.
4. inherit 
Inherits this property from its parent element.
Note - 
We will only see example of fixed property because if you set an image then by default it is set to scroll which means image will move when you will scroll 
Now we will see Example -
Example - Using Fixed property
Now the image will not move even if you scroll the page
<!DOCTYPE html>
<html lang="en">
    <style type="text/css">

body
    {
        color: wheat;
background-image: url(krishnaimage.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-color: black;
    }
        </style>
<link rel="stylesheet" href="sample.css">
<body>
    <h1 class="fruit">This is first Heading
    </h1>
    <p class="apple">
this is an apple and an apple a day keeps doctor away
  </p>
  <p class="apple">
    this is an apple and an apple a day keeps doctor away
      </p>
      <p class="apple">
        this is an apple and an apple a day keeps doctor away
          </p>
    <p class="apple">
this is an apple and an apple a day keeps doctor away
  </p>
    <p class="apple">
this is an apple and an apple a day keeps doctor away
  </p>
    <p class="apple">
this is an apple and an apple a day keeps doctor away
  </p>
    <p class="apple">
this is an apple and an apple a day keeps doctor away
  </p>
    <p class="apple">
this is an apple and an apple a day keeps doctor away
  </p>
    <p class="apple">
this is an apple and an apple a day keeps doctor away
  </p>
    <p class="apple">
this is an apple and an apple a day keeps doctor away
  </p>
    <p class="apple">
this is an apple and an apple a day keeps doctor away
  </p>
    <p class="apple">
this is an apple and an apple a day keeps doctor away
  </p>
  <p class="apple">
    this is an apple and an apple a day keeps doctor away
      </p>
      <p class="apple">
        this is an apple and an apple a day keeps doctor away
          </p>
    <p class="apple">
this is an apple and an apple a day keeps doctor away
  </p>
    <p class="apple">
this is an apple and an apple a day keeps doctor away
  </p>
    <p class="apple">
this is an apple and an apple a day keeps doctor away
  </p>
    <p class="apple">
this is an apple and an apple a day keeps doctor away
  </p>
    <p class="apple">
this is an apple and an apple a day keeps doctor away
  </p>
    <p class="apple">
this is an apple and an apple a day keeps doctor away
  </p>
    <p class="apple">
this is an apple and an apple a day keeps doctor away
  </p>
    <p class="apple">
this is an apple and an apple a day keeps doctor away
  </p>
    <p class="apple">
this is an apple and an apple a day keeps doctor away
  </p>
    <p class="apple">
this is an apple and an apple a day keeps doctor away
  </p>
    <p class="apple">
this is an apple and an apple a day keeps doctor away
  </p>
    <p class="apple">
this is an apple and an apple a day keeps doctor away
  </p>
 
                         
</body>
</html>
 
Output - 
Example 2 - Using scroll -
<!DOCTYPE html>
<html lang="en">
    <style type="text/css">

body
    {
        color: wheat;
background-image: url(krishnaimage.jpg);
background-attachment:scroll;
background-repeat: no-repeat;
background-color: black;
    }
        </style>
<link rel="stylesheet" href="sample.css">
<body>
    <h1 class="fruit">This is first Heading
    </h1>
    <p class="apple">
this is an apple and an apple a day keeps doctor away
  </p>
  <p class="apple">
    this is an apple and an apple a day keeps doctor away
      </p>
      <p class="apple">
        this is an apple and an apple a day keeps doctor away
          </p>
    <p class="apple">
this is an apple and an apple a day keeps doctor away
  </p>
    <p class="apple">
this is an apple and an apple a day keeps doctor away
  </p>
    <p class="apple">
this is an apple and an apple a day keeps doctor away
  </p>
    <p class="apple">
this is an apple and an apple a day keeps doctor away
  </p>
    <p class="apple">
this is an apple and an apple a day keeps doctor away
  </p>
    <p class="apple">
this is an apple and an apple a day keeps doctor away
  </p>
    <p class="apple">
this is an apple and an apple a day keeps doctor away
  </p>
    <p class="apple">
this is an apple and an apple a day keeps doctor away
  </p>
    <p class="apple">
this is an apple and an apple a day keeps doctor away
  </p>
  <p class="apple">
    this is an apple and an apple a day keeps doctor away
      </p>
      <p class="apple">
        this is an apple and an apple a day keeps doctor away
          </p>
    <p class="apple">
this is an apple and an apple a day keeps doctor away
  </p>
    <p class="apple">
this is an apple and an apple a day keeps doctor away
  </p>
    <p class="apple">
this is an apple and an apple a day keeps doctor away
  </p>
    <p class="apple">
this is an apple and an apple a day keeps doctor away
  </p>
    <p class="apple">
this is an apple and an apple a day keeps doctor away
  </p>
    <p class="apple">
this is an apple and an apple a day keeps doctor away
  </p>
    <p class="apple">
this is an apple and an apple a day keeps doctor away
  </p>
    <p class="apple">
this is an apple and an apple a day keeps doctor away
  </p>
    <p class="apple">
this is an apple and an apple a day keeps doctor away
  </p>
    <p class="apple">
this is an apple and an apple a day keeps doctor away
  </p>
    <p class="apple">
this is an apple and an apple a day keeps doctor away
  </p>
    <p class="apple">
this is an apple and an apple a day keeps doctor away
  </p>
 
                         
</body>
</html>
Output -