Fixed Background Image & Effect in 7.1

Site URL: http://www.createdbybutter.com

Hi all,

I'm looking to add a fixed/static background to a single page. Unfortunately, I'm using 7.1 and site-wide isn't available. 

The image should remain still, and would ideally use the "liquid" filter available through SquareSpace. 

Here's the code i'm using now, with no luck: 

Quote

/*fixed background*/
#collection-5f8d94887df4e315ccd4ae2b #canvas{
  max-width: 100% !important;
  min-height: calc(100vh - 11px);
 padding-left: 0px !important;
 padding-right: 0px !important;
 padding-top: 11px !important;
 background: url(https://static1.squarespace.com/static/5e7e147385c717027a8824b2/t/5fa4a6d753605a17821d38ac/1604626136212/Butter9shadow-37.png)no-repeat center center;
  -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Any help is greatly appreciated! Site password is "booter".

Cheers!

H

Hi all, incase anyone is looking for a fixed background over an entire page with one of the built-in image effects, here's how I cobbled a solution together:

1. Moved all sections together into one single section with the section at the widest width.

2. Added code and spacers to skinny up a few of the blocks that hadn't been the widest width.

3. Added this code to fix the background's position:

Quote

section[data-section-id="5faee2fb03633f0646b76ede"] .section-background {
 position: fixed;
 scale: 100%;
}

** I chose to apply the background without code to utilize squarespace's responsive cropping. I like the focus feature personally. Applying the background this way also allowed me to use a built in webGL filter for some extra razzle-dazzle.

I used this code, and it worked...but it overwrote everything in the footer.  Text, buttons, images, etc.  all disappeared.  They are present in the editor, but are not visible outside of edit mode.  

Any help?

On 10/16/2021 at 3:00 AM, couper37 said:

I used this code, and it worked...but it overwrote everything in the footer.  Text, buttons, images, etc.  all disappeared.  They are present in the editor, but are not visible outside of edit mode.  

Any help?

Can you share link to your site? We can check easier

Here is the fix to the footer issue.  Add to CSS.

Thank you tuanphan!

/* Fix footer */
footer#footer-sections {
    position: relative;
    z-index: 999999999999999;
}

I gave this a shot too. But for some reason, the sections preceding the one with the fixed background, also include the fixed background. How can you get it to apply only to one section? (The section that follows the one with the fixed background keeps it's own background... not sure what's up.)

I'm trying to do something similar but ideally more simple. Is anyone aware of a way for a page with only two sections -- one main and one footer -- to share the same background? Here's a screenshot of what I'm running into. If it was just a static image I know there's a code for that, but I'm using the animated effects and would like those to run under the footer as well. But of course the footer is a different section and any effects applied there are going to clash with those of the other section. I fear what I'm trying to do may not be possible. 

https://turtle-kumquat-lsg8.squarespace.com/section-background-test
password: squarespacehelp

On 1/4/2023 at 2:16 PM, AndyKhouri said:

I'm trying to do something similar but ideally more simple. Is anyone aware of a way for a page with only two sections -- one main and one footer -- to share the same background? Here's a screenshot of what I'm running into. If it was just a static image I know there's a code for that, but I'm using the animated effects and would like those to run under the footer as well. But of course the footer is a different section and any effects applied there are going to clash with those of the other section. I fear what I'm trying to do may not be possible. 

https://turtle-kumquat-lsg8.squarespace.com/section-background-test
password: squarespacehelp

Add to Design > Custom CSS

body#collection-63b52509674da0330e64198b {
	& {
    position: relative;
}
footer#footer-sections {
    position: absolute !important;
    bottom: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    margin: 0 !important;
}
#siteWrapper section[data-section-id="6386fefdeeedf56d7e15027f"] , #siteWrapper section[data-section-id="6386fefdeeedf56d7e15027f"] .section-background, #siteWrapper section[data-section-id="6386fefdeeedf56d7e15027f"] .section-border {
    background: transparent !important;
}
div#siteWrapper {
    position: relative;
}
}

On 1/7/2023 at 12:56 AM, tuanphan said:

Add to Design > Custom CSS

body#collection-63b52509674da0330e64198b {
	& {
    position: relative;
}
footer#footer-sections {
    position: absolute !important;
    bottom: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    margin: 0 !important;
}
#siteWrapper section[data-section-id="6386fefdeeedf56d7e15027f"] , #siteWrapper section[data-section-id="6386fefdeeedf56d7e15027f"] .section-background, #siteWrapper section[data-section-id="6386fefdeeedf56d7e15027f"] .section-border {
    background: transparent !important;
}
div#siteWrapper {
    position: relative;
}
}

 

Hey, this seems to have done the trick. Thanks so much!