Why does the image stop displaying when adding the fixed background property?

Question

Layout

I use two absolutely identical blocks on the page with a large picture, which should remain in place while scrolling

<section id="big-big-img-1" class="pt-0 pb-0 dark text-center hidden-sm hidden-xs" style="    background: url('http://matrix-uav.ua/wp-content/uploads/2018/07/DSC0695822-e1532337731108-1.jpg') no-repeat center center;
    
    background-attachment: fixed;																		 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 800px;
">
  
</section>

But in the first block, instead of an image, there is an empty space:

(if you remove the background-attachment: fixed; property, then the image appears), and in the second block, everything is always ok:

What's the magic?

Answer 1

Found a description of a similar problem. Along the way, all because of the video
https://stackoverflow.com/questions/202409/chrome-issue-with-backg... And I found a solution
in another thread on the toaster :

-webkit-transform: translate3d(0,0,0);
-webkit-backface-visibility: hidden;

Just add to the desired block

Answer 2

Try writing "background-image" instead of "background". Repeat and Position are also separate.