Why is my background image disappearing/flickering (bootstrap)? - html

Question

I am noticing an interesting problem with my site. I have a section that has a static background image and as you scroll there's a quote and button (eventually will link to a store) over the top of it. To my knowledge, it was working in the past, but yesterday I noticed after a few seconds the background image is gone, replaced with just a gray background. The image will flicker in and out a bit before permanently being replaced with the gray background.
Here is my HTML:
<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">
Get Some
</p>
</div>
</div>
</div>
</section>
Here is my CSS:
.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;
}
The image URL is correct because it initially loads for a couple of seconds. Originally, this was written short hand but some suggestions I've seen recommended doing the long form for the CSS. I split it out, but that doesn't seem to make a difference.
Actual look (incorrect):
Expected look (which I get for a few seconds before it changes automatically):
Edit:
Here is a fiddle (though it's missing some javascript so it'll look funny).

Answer 1

please check your url is not proper loading :
.bar.background-image-fixed-2 {
background-image: url('https://images.unsplash.com/photo-1490810277975-e64342ceecf0?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=88e69bf894f334456f8ae269752556e1&auto=format&fit=crop&w=1650&q=80');
background-position: center center;
background-repeat:no-repeat;
background-attachment: fixed;
background-size: cover;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<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 class="text-white"><em>"Herb is the healing of a nation" - Bob Marley</em></h3>
<p class="text-center">
Get Some
</p>
</div>
</div>
</div>
</section>