Background Images Disappearing > random code glitch / issues = Help!

Hi All

I build squarespace websites for client (about 20 per year) and I have just noticed in the last few weeks that if we have used a background image on a page it is now showing as blank, it's happened to about 6 sites now and to "fix it" I have to use the "image effect" to that background image - which is not ideal! - actually its super frustrating!

I have contacted Squarespace twice and they are basically saying someone is putting in code for Parallax scrolling via code injection which is NOT possible as I am the only one who touches these websites and I have no idea how to code (plus it's happening across multiple websites that I have built for all different clients)

Has anyone else experienced this??

Image examples attached. 

If anyone knows why this is happening and has a solution that doesn't involve coding please let me know, thank you

None of the images on my site are loading either. This is a recent change... they just disappeared.

This is happening to me too. I made a forum post about it hoping for help, but I haven't had any luck yet.

Hi,

Can you share link to your site? I can take a look

i have actually fixed them all now but just concern it might happen again in the future - thank you all for your replies!

How did you solve this? I'm having the same issue and I had to go in and remove my code for parallax on backgroung images just to have the images reappear

I'd love to know if there's a code fix for this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script>

<script>
  $('.has-background:not(:has(.sqs-video-background))').each(function() {
    var findImage = $(this).find('.section-background img');
    var imgUrl = findImage.data('src') + '?format=2500w';
    var dimensions = findImage.data('image-dimensions');
    var imgWidth = dimensions.substr(0, dimensions.indexOf('x'));
    var imgHeight = dimensions.substr(dimensions.indexOf('x') + 1);
    $(this).parallax({
        bleed: 0,
        imageSrc: imgUrl,
        naturalWidth: imgWidth,
        naturalHeight: imgHeight,
        speed: .5,
    })
});
document.getElementsByTagName("body")[0].onresize = function() {
    setTimeout(function() {
        jQuery(window).trigger('resize').trigger('scroll')
    }, 100)
};
</script>

<style>.has-background{background-color:transparent!important}.has-background .section-background{background-color:transparent!important}.has-background .section-background img{visibility:hidden!important}.has-background.background-width--inset{margin:4vw;padding:0!important}.has-background.background-width--inset:not(.content-collection):not(.gallery-section) .section-background{top:0!important;right:0!important;bottom:0!important;left:0!important}</style>