Jump to content

Fixed Background Image & Effect in 7.1

Recommended Posts

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

Link to comment

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.

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

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
  • 2 months later...
  • 11 months later...

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

Screenshot 2023-01-03 at 11.08.41 PM.png

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

Screenshot 2023-01-03 at 11.08.41 PM.png

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

 

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

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.