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! 

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

 

I'd like to adapt this technique to include more sections. Assuming that's even possible, could you annotate the code to indicate where to plug each section ID? For example /*Section 1 goes here*/ etc? 

This is Page ID. body#collection-63b52509674da0330e64198b

To include More ID, use this format 

body#collection-63b52509674da0330e64198b, Page-ID-2, Page-ID-3

On 2/7/2023 at 5:09 AM, AndyKhouri said:

I'd like to adapt this technique to include more sections. Assuming that's even possible, could you annotate the code to indicate where to plug each section ID? For example /*Section 1 goes here*/ etc? 

Follow this guide to find Page ID. 

On 2/10/2023 at 1:17 AM, tuanphan said:

This is Page ID. body#collection-63b52509674da0330e64198b

To include More ID, use this format 

body#collection-63b52509674da0330e64198b, Page-ID-2, Page-ID-3

Follow this guide to find Page ID. 

Thanks so much! One more question on this. Is it possible to tweak this code to work in Page Settings > Advanced, as opposed to Design > Custom CSS? The reason I'd like to do that is to keep things manageable page per page. Here's a screenshot of the code that's not plugging in for some reason (I am using the opening and closing style tags).

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

Password is incorrect. Can you check it again?

On 2/21/2023 at 1:30 AM, tuanphan said:

Password is incorrect. Can you check it again?

Oops! Try this:

https://turtle-kumquat-lsg8.squarespace.com/test-page
Password: circlehelp

On 2/26/2023 at 1:43 PM, AndyKhouri said:

Oops! Try this:

https://turtle-kumquat-lsg8.squarespace.com/test-page
Password: circlehelp

Add to Test Page Header

<style>
  body {
    position: relative;
}
footer#footer-sections {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 999;
    width: 100%;
}
footer.sections section, footer.sections .section-background, .section-border {
    background: transparent !important;
}
</style>

@createdbybutter   i made this account just to ask you how the heck to do this.  I haven't made a website in like 15 years and even then it was just a silly nothing in some college course.  I followed some of what you said, but how do I know what to put in this second "section[data-section-id="5faee2fb03633f0646b76ede"] .section-background "

Like I have no clue what the data section id is or how to find that.  Is that the only thing I'd need to change to get it working on my site?  Input the correct ID for my specific site and whatever image I have set as the background will stay fixed?

Sorry I'm totally lost, but I know enough about websites to know what looks good... just not how to make to make it happen at all.

On 8/22/2023 at 10:17 AM, CluelessatCoding said:

@createdbybutter   i made this account just to ask you how the heck to do this.  I haven't made a website in like 15 years and even then it was just a silly nothing in some college course.  I followed some of what you said, but how do I know what to put in this second "section[data-section-id="5faee2fb03633f0646b76ede"] .section-background "

Like I have no clue what the data section id is or how to find that.  Is that the only thing I'd need to change to get it working on my site?  Input the correct ID for my specific site and whatever image I have set as the background will stay fixed?

Sorry I'm totally lost, but I know enough about websites to know what looks good... just not how to make to make it happen at all.

Use this free tool to find data section id

https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff

Hi everyone, 

My request is concerning a fixed header. I made dynamic transparent header with full bleed images background. They are fixed background but when I am scrolling down, the background image disappeared and the plain template is showing out. Is there any way to have all the time the backgound header image even when I am scrolling down ? Thank you for your help !

On 8/28/2023 at 4:43 PM, vicg said:

Hi everyone, 

My request is concerning a fixed header. I made dynamic transparent header with full bleed images background. They are fixed background but when I am scrolling down, the background image disappeared and the plain template is showing out. Is there any way to have all the time the backgound header image even when I am scrolling down ? Thank you for your help !

What is your site url? We can check problem easier

Hi! I am having a similar issue. I have multiple sections on my home page that I would like to share the same background, but appear to be "floating" over the static background as you scroll down the page. Everytime I add the background to the first section and build out that section with another image, the image is captured in the background as well so it appears that section is being scrolled over by my other sections- I did make the first section sticky. How do I build out my pages to all have this effect? Here's my site:

www.traditionalyachtcharters.com

PW: Schoooner

Thanks!

On 10/24/2023 at 8:28 PM, jessicajacques said:

Hi! I am having a similar issue. I have multiple sections on my home page that I would like to share the same background, but appear to be "floating" over the static background as you scroll down the page. Everytime I add the background to the first section and build out that section with another image, the image is captured in the background as well so it appears that section is being scrolled over by my other sections- I did make the first section sticky. How do I build out my pages to all have this effect? Here's my site:

www.traditionalyachtcharters.com

PW: Schoooner

 

Thanks!

Password is incorrect

Sorry, it's Schooner

On 11/13/2020 at 10:22 PM, createdbybutter said:

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:

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

Hi I tried to use this but, it's being applied in other sections of my page. Can anyone help on how to have a static image background on one specific section only? thanks

On 1/20/2022 at 3:19 AM, Pierre-Alain said:

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

Hi I have the same problem, were you able to fix it?

On 12/10/2023 at 10:19 PM, neil0909 said:

Hi I tried to use this but, it's being applied in other sections of my page. Can anyone help on how to have a static image background on one specific section only? thanks

You can target data-section-id, so it will apply to specific section only, if you provide site url, we can give exact code