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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

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

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.