Jump to content

Section background image suddenly not showing

Recommended Posts

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

Link to comment
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

image.thumb.png.f92660559901177d518bc9bb4782c098.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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

Edited by kellijayne
adjusted the question so it reads better
Link to comment

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!

Link to comment
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

Edited by kellijayne
Link to comment
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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

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!

Link to comment
  • 2 months later...

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>

 

Link to comment
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.

2013715293_ScreenShot2022-11-14at5_16_59PM.png.3c74ba83da652d295afd549b6f6823a6.png

1032214887_ScreenShot2022-11-14at5_17_39PM.png.5f6f10936f8c1cefae134b8711d5e82e.png

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 5 months later...
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. 

Screenshot 2023-04-21 at 9.52.35 AM.png

Screenshot 2023-04-21 at 9.52.15 AM.png

Can you share link to Testimonials page?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 11 months later...

Something similar is happening to me. When I upload a background photo or video it shows that its uploaded but its not appearing.  I looked at the script as others mentioned above and it says "hidden." How do I get rid of this?

image.png

Screenshot 2024-04-02 at 7.46.58 PM.png

Link to comment
On 4/3/2024 at 6:49 AM, Tiamorant said:

Something similar is happening to me. When I upload a background photo or video it shows that its uploaded but its not appearing.  I looked at the script as others mentioned above and it says "hidden." How do I get rid of this?

image.png

Screenshot 2024-04-02 at 7.46.58 PM.png

Can you share link to this page?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.