What does background-attachment exactly do?

116 Views Asked by At

I was thinking when we write background: inherit; it should take all of parent properties exactly and according to it, the background of child element should be reproduced,right?

But today when I worked with background-attachment I faced with a strange result, It seems when we use background-attachment: fixed; there is no further inheritance:

body{
  background-image: url('https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search/jcr_content/main-pars/image/visual-reverse-image-search-v2_intro.jpg ');
  background-attachment: fixed;
}

#first{
  margin:80px 160px;
  background: inherit;
  border: dotted;
  width: 200px;
  height: 200px;
}
<div id="first"></div>

As you can see, the result of above code seems to be equivalent with #first{ background:transparent; ...}.

Can anyone explain why this happens with background-attachment: fixed;? I searched through Internet but I couldn't find my answer, almost all of the websites just give me the same below irrational explanation:

The background-attachment property specifies whether the background image should scroll or be fixed (will not scroll with the rest of the page):

1

There are 1 best solutions below

0
On

Background Attachment sets the property whether a background image scrolls with the rest of the page or is fixed. It's like Relative Position with Image