Section background image suddenly not showing

Site URL: https://www.emilyreed.design/

Hi,

All of my section background images suddenly have stopped showing on the live site and the back end. When I go to section formatting the image is there as usual, allows me to edit, add effects, etc. The image shows when I add effects, but when I remove the effects it is blank again. Ideally I'd like to not have effects on all of my background images in order for it to show up. 

I have been working with squarespace support on this, and they suggested my custom css could be causing it, so I removed all custom css and no luck. They have made my issue an escalated ticket and I might not hear back from them for several days, so wanted to see if anyone here had any solutions. This is happening site wide (I have section background images on 7 different pages), so I don't think it's an issue with the image file size or type. Attached is a screen recording of the issue in the back end. 

My site is https://www.emilyreed.design/ , password is squarespace. 

Please help!! Thank you!!

I'm having the same problem! 

Which section are you referring to? It looks fine to me on homepage

I added an image effect about an hour ago for an easy fix. I just removed it again and the blank screen is back if you want to take a look. I also attached a screen recording in the initial post

2 hours ago, emily_rd said:

I added an image effect about an hour ago for an easy fix. I just removed it again and the blank screen is back if you want to take a look. I also attached a screen recording in the initial post

I see this code in Code Injection or Page Header, you need to remove it

.has-background .section-background img {
    visibility: hidden!important;
}

The image will appear

I had this problem!

I have custom CSS in the footer for parallax and as soon as I removed it, the images were fine.

You're right, its fixed! I had that same code injection for parallax which must've been causing it. Weird because I had that code in there for several weeks and it just started acting up. 

@tuanphan apparently it was the parallax code i've been using on several of my 7.1 sites (fluid engine as well). Its still working fine on "most" of my 7.1 sites, but this one it really effected including styling issues! 

Here's one of my sites where that same code is working perfectly
www.LostIsle.com

Here is the site I'm currently building out where suddenly yesterday it stopped working (I've since removed the code and am using the default background animations. NOT NEAR AS COOL AS PARALLAX!!!!!!!!!!!!!!

https://shaferrealestate.squarespace.com
PW: Shafer

HERE IS THE CODE: (placed in footer)

<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');
    var dimensions = findImage.data('image-dimensions');
    var imgWidth = dimensions.substr(0, dimensions.indexOf('x'));
    var imgHeight = dimensions.substr(dimensions.indexOf('x') + 1);
    $(this).parallax({
        imageSrc: imgUrl,
        naturalWidth: imgWidth,
        naturalHeight: imgHeight,
        speed: 0.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>
<style>

Something similar is happening to my site, amandaramirezhomes.com

I adjusted my email address in the footer of my site and ALL of the video backgrounds across my entire site turned black. When I click to see if the videos are still uploaded they are, but the content being displayed are just black boxes. This is happening on all devices and whether I am connected to wifi or cellular. PLEASE HELP!

12 hours ago, amandapanda1014 said:

Something similar is happening to my site, amandaramirezhomes.com

 

I adjusted my email address in the footer of my site and ALL of the video backgrounds across my entire site turned black. When I click to see if the videos are still uploaded they are, but the content being displayed are just black boxes. This is happening on all devices and whether I am connected to wifi or cellular. PLEASE HELP!

1342560761_PleaseHelpSquarespaceSite.mov

Hi Amanda,

SquareSpace did an update, which they do often. Many of us designers add CSS or custom code to get a little more out of the generic templates... for me it's parallax and menu dropdown arrows to show a dropdown exists... those SHOULD be standard on this platform.  Squarespace does NOT support custom code or CSS, so if you add it, you take the risk of this happening. I have 21 sites on 7.1 with this code integrated, about 75% of them still work and for some reason 25% don't, which I have to go back and adjust all the styling and add the standard background image animations, which are so lack luster but they are better than nothing

2 hours ago, kellijayne said:

about 75% of them still work and for some reason 25% don't,

This could be because SS is staging the rollout of this feature update. SS often does this to verify a change works before unleashing it on every site.

I'm having issues with background images showing on some sections and others not. No code being used, and am in Classic Editor. No difference whether its a jpg or PNG ...nothing shows on the page, though it when editing it shows an image has been uploaded ...

Its maddening!

I also just experienced that the background image disappeared. I removed the parallax code and its back again, but now there is no parallax. Does someone know a new code for this that works?

I removed this code: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/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');
    var dimensions = findImage.data('image-dimensions');
    var imgWidth = dimensions.substr(0, dimensions.indexOf('x'));
    var imgHeight = dimensions.substr(dimensions.indexOf('x') + 1);
    $(this).parallax({
        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>

OMG - there is Parallax as a image effect on backgrounds now - no need for code anymore for this one 🤩

Lisbet, I am not clear how you solved this... can you share more? I am dealing with the same thing!

12 minutes ago, sarahcalvin said:

I am not clear how you solved this... can you share more? I am dealing with the same thing!

If you're on v7.1 you can select an effect for background images.

Let us know how it goes.

Thank you so much... it looks like maybe they improved their native parallax function... 

For me, this is a no go. I used the parallax code to make my animated gifs work in parallax, which Squarespace doesn't support (it only renders the first frame of the gif when turning on their different modes). If anyone has suggestions, I would be very grateful.

I'm also suffering from this. 25% of my section background simply aren't appearing, even after replacing the images. "Image Effect" is completely blank, no options at all. I have no Custom CSS. 

3 hours ago, NikoNikoNiko said:

"Image Effect" is completely blank, no options at all.

What happens if you close the blank panel then open it up again?

@creedon

Thanks for the help. Same thing, just tried on a different browser as well. 

Simply missing the image  effects controls and I suspect it's the reasoning behind the background not appearing. Im pretty sure I had parallax setting on before. 

On 4/21/2023 at 11:55 PM, NikoNikoNiko said:

 

Thanks for the help. Same thing, just tried on a different browser as well. 

Simply missing the image  effects controls and I suspect it's the reasoning behind the background not appearing. Im pretty sure I had parallax setting on before. 

Can you share link to Testimonials page?