Something unusual is happening with my website. There's a section with a static background image, and as you scroll, a quote and button (which will eventually link to a store) appear on top of it. Previously, this setup was working fine. However, yesterday I noticed that after a few seconds, the background image disappears and is replaced by a gray background. The image flickers on and off before being permanently replaced by the gray background.
Here is the HTML code:
<section class="bar background-image-fixed-2 no-mb color-white text-center">
<div class="dark-mask"></div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="icon icon-lg"><i class="fa fa-leaf"></i>
</div>
<h3><em>"Herb is the healing of a nation" - Bob Marley</em></h3>
<p class="text-center">
<a href="#" class="btn btn-template-transparent-black btn-lg">Get Some</a>
</p>
</div>
</div>
</div>
</section>
Here is the CSS code:
.bar.background-image-fixed-2 {
background-image: url('../img/fixed-background-2.jpg');
background-position: center center;
background-repeat no-repeat;
background-attachment: fixed;
background-size: cover;
}
I have verified that the image URL is correct because it loads initially for a few seconds. Although the CSS was originally written in shorthand, I have tried switching to long form as suggested by some, but this change does not seem to have any impact.
Current incorrect appearance: https://i.sstatic.net/7baGv.jpg
Expected appearance (which is displayed briefly before changing automatically):
https://i.sstatic.net/qV3mu.jpg
Edit:
Here is a fiddle (although it may look unusual due to missing javascript).