Jump to content

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

Recommended Posts

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

Screen Shot 2023-01-09 at 8.36.21 pm.png

Screen Shot 2023-01-09 at 8.36.44 pm.png

Screen Shot 2023-01-09 at 8.37.04 pm.png

Link to comment
  • Replies 5
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

  • 2 weeks later...
  • 2 weeks later...

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>

  $('.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);
        bleed: 0,
        imageSrc: imgUrl,
        naturalWidth: imgWidth,
        naturalHeight: imgHeight,
        speed: .5,
document.getElementsByTagName("body")[0].onresize = function() {
    setTimeout(function() {
    }, 100)

<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>

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.