1

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

milad
  • 1,854
  • 2
  • 11
  • 27
  • 1
    no, it is inherited just fine. It just happens that you use it in a way that has no visual effect since you *hide* the effect by using the background in two nested divs. Try adding the background only to the div and not the body and you will understand. – Gabriele Petrioli Sep 08 '20 at 21:47
  • @GabrielePetrioli, Thank you, it was very good to add background to the div and not body:) can you write your comment in form of an answer? then I accept it and close the question. – milad Sep 08 '20 at 22:00
  • this is all the trick of background-attachment:fixed: Use the same background in different elements and make it look like only one. – Temani Afif Sep 08 '20 at 22:16
  • @TemaniAfif Exactly and it is so useful. – milad Sep 09 '20 at 09:51

1 Answers1

0

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

Nitishp
  • 1