CSS - background-attachment



The background-attachment property provided by CSS determines whether the position of an image on a background is fixed within the viewport, or scrolls within its container.

Possible Values

  • fixed:

    • Background image is fixed relative to the viewport.

    • Even with a scrolling mechanism, the background remains fixed.

  • local:

    • Background image is fixed relative to the element's contents.

    • If there is a scrolling mechanism, the background scrolls with the contents.

  • scroll:

    • It is the default value.

    • Background image scrolls with the main view, but stays fixed inside the local view.

Applies to

All the HTML elements.

DOM Syntax

object.style.backgroundAttachment = scroll | fixed | local;

CSS background-attachment - fixed Value

The following example demonstrates the background-attachment: fixed property fixed the background image relative to the viewport −

<html>
<head>
<style>  
   .fixed {
      background-image: url('images/logo.png');
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-position: left top;
      background-color: lightblue;
      background-size: 40% 30%;
      padding:5rem;
      width: 800px;
      height: 500px;
   }
</style>
</head>
<body>
   <div class="fixed">
   <h2>background-attachment: fixed</h2>
   <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
   </div>
</body>
</html> 

CSS background-attachment - scroll Value

The following example demonstrates the background-attachment: scroll property scrolls the background image with the content −

<html>
<head>
<style>  
   .scroll {
      background-image: url('images/logo.png');
      background-repeat: no-repeat;
      background-attachment: scroll;
      background-position: left top;
      background-color: lightblue;
      background-size: 40% 30%;
      padding:5rem;
      width: 800px;
      height: 500px;
   }
</style>
</head>
<body>
   <div class="scroll">
   <h2>background-attachment: scroll</h2>
   <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
   </div>
</body>
</html> 

CSS background-attachment - local Value

The following example demonstrates the background-attachment: scroll property fixed the background image relative to the element's contents −

<html>
<head>
<style>  
   .local {
      background-image: url('images/logo.png');
      background-repeat: no-repeat;
      background-attachment: local;
      background-position: left top;
      background-color: lightblue;
      background-size: 40% 30%;
      padding:5rem;
      width: 800px;
      height: 500px;
   }
</style>
</head>
<body>
   <div class="local">
   <h2>background-attachment : local</h2>
   <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
   </div>
</body>
</html> 
Advertisements