The website's background image displays on all devices such as laptops and Android phones, but not on iOS mobile devices. I even resized the image to 768px * 365px, but it still doesn't work.
.bg-img {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: -1;
background-position: center;
background-size: cover;
background-attachment: fixed;
}
.bg-img .overlay {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
opacity: .8;
background: #1C1D21;
}<!-- Background Image -->
<!-- Only visible on large devices -->
<div class="visible-xl visible-lg visible-md hidden-sm hidden-xs">
<div class="bg-img" style="background-image: url('./img/team/background-clouds-dark-957002.jpg');">
<div class="overlay"></div>
</div>
</div>
<!-- Only visible on mobile devices -->
<div class="visible-xs visible-sm hidden-md hidden-lg hidden-xl">
<div class="bg-img" style="background-image: url('./img/team/Smallsize.jpg');">
<div class="overlay"></div>
</div>
</div>
<!-- /Background Image -->