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):
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