CSS background-attachment

Please Share On:

Definition:

CSS background-attachment specifies a background image can be scrolled, fixed, or inherit.

Property Values are:

background-attachment: scroll | fixed | inherit;

Here is the original image. Let’s use this image as a background-attachment specification:

Syntax:

/*Set background-attachment to scroll*/
background-attachment: scroll;

/*Set background-attachment to fixed*/
background-attachment: fixed;

/*Set background-attachment to inherit*/
background-attachment: inherit;

1) background-attachment: scroll;

Definition:

This is a default background-attachment property. Here, the background image will scroll with the page.

Source Code:

<!DOCTYPE html>
<html>
<head>
<style>
#background_attachment{
  background-image: url("https://www.elsebazaar.com/blog/wp-content/uploads/2020/03/Tutorial.png");
  background-repeat: no-repeat;
  background-position: right top;
  margin-right: 50px;
  background-attachment: scroll;
}
</style>
</head>

<body id="background_attachment">
<h3>The CSS background-attachment Property</h3>
<br>

<p>CSS background-attachment specifies a background image can be scrolled, fixed or inherit.</p>
<br>

<p><strong>Note: </strong> Try to resize your opened browser, if you don't see any scroll bar. </p>
<br>

<p>Scroll down to see your background-image: scroll.</p>
<p>Scroll down to see your background-image: scroll.</p>
<p>Scroll down to see your background-image: scroll.</p>
<p>Scroll down to see your background-image: scroll.</p>
<p>Scroll down to see your background-image: scroll.</p>
<p>Scroll down to see your background-image: scroll.</p>
<p>Scroll down to see your background-image: scroll.</p>
<p>Scroll down to see your background-image: scroll.</p>
<p>Scroll down to see your background-image: scroll.</p>
<p>Scroll down to see your background-image: scroll.</p>
</body>
</html>

Note: Replace the above “image.png” with your local or server image location.

Result:


2) background-attachment: fixed;

Definition:

Here, the image will not scroll with the page. Click “TRY IT YOURSELF” to see the result and try to scroll up and down. The image will remain in a fixed position in the right top corner. You can define your own position for the image.

Source Code:

<!DOCTYPE html>
<html>
<head>
<style>
#background_attachment{
  background-image: url("image.png");
  background-repeat: no-repeat;
  background-position: right top;
  margin-right: 50px;
  background-attachment: fixed;
}
</style>
</head>
 
<body id="background_attachment">
<h3>The CSS background-attachment Property</h3>
<br>
 
<p>CSS background-attachment specifies a background image can be scroll, fixed or inherit.</p>
<br>
 
<p><strong>Note: </strong> Try to resize your opened browser, if you don't see any scrollbar. </p>
<br>
 
<p>Scroll down to see your background-image: fixed.</p>
<p>Scroll down to see your background-image: fixed.</p>
<p>Scroll down to see your background-image: fixed.</p>
<p>Scroll down to see your background-image: fixed.</p>
<p>Scroll down to see your background-image: fixed.</p>
<p>Scroll down to see your background-image: fixed.</p>
<p>Scroll down to see your background-image: fixed.</p>
<p>Scroll down to see your background-image: fixed.</p>
<p>Scroll down to see your background-image: fixed.</p>
<p>Scroll down to see your background-image: fixed.</p>
 
</body>
</html>

Result:


3) background-attachment: inherit;

Definition:

Inherits this property from its parent element. See below for source code and output. You can try it yourself by clicking below “TRY IT YOURSELF” button.

<!DOCTYPE html>
<html>
<head>
<style>
#background_attachment{
  background-image: url("image.png");
  background-repeat: no-repeat;
  background-position: right top;
  margin-right: 50px;
  background-attachment: inherit;
}
</style>
</head>
 
<body id="background_attachment">
<h3>The CSS background-attachment Property</h3>
<br>
 
<p>CSS background-attachment specifies a background image can be scroll, fixed or inherit.</p>
<br>
 
<p><strong>Note: </strong> Try to resize your opened browser, if you don't see any scrollbar. </p>
<br>
 
<p>Scroll down to see your background-image: inherit.</p>
<p>Scroll down to see your background-image: inherit.</p>
<p>Scroll down to see your background-image: inherit.</p>
<p>Scroll down to see your background-image: inherit.</p>
<p>Scroll down to see your background-image: inherit.</p>
<p>Scroll down to see your background-image: inherit.</p>
<p>Scroll down to see your background-image: inherit.</p>
<p>Scroll down to see your background-image: inherit.</p>
<p>Scroll down to see your background-image: inherit.</p>
<p>Scroll down to see your background-image: inherit.</p>
 
</body>
</html>

Result:


Donate to support writers.


You may be interested in the following topics:

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright @2023. All Right Reserved.


Social media & sharing icons powered by UltimatelySocial