Transparent Fixed Footer

Site URL: https://lettuce-azalea-k7l4.squarespace.com/

Hi! I am trying to get my footer to adopt the background of the page and also have it be fixed.

Is this possible since the footer is its own block?

I am trying to practice recreating this site in Squarespace: https://toqa.tv/

This is mine: https://lettuce-azalea-k7l4.squarespace.com/ (pw: footerhelp)

Try adding to Design > Custom CSS

/* Footer transparent */
body.homepage {
    position: relative;
}
body.homepage footer#footer-sections {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 999;
    width: 100%;
}
body.homepage footer.sections section, body.homepage footer.sections .section-background {
    background: transparent;
}

Hi @tuanphan I added that, but it didn't seem to do anything for the homepage. Am I missing something?

I thought your site is 7.1.

Use this new code

/* Footer transparent */
body.homepage footer.Footer {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    background-color: transparent !Important;
}

Awesome! Thank you so much! That worked!

Hi @tuanphan ! 

Working in 7.1

Have tried the above code and some others floating around the internet and can't seem to get the transparent background to work (fixed footer works no problem). Any thoughts? 

site url: https://ukulele-chiton-zbz6.squarespace.com/
pass: sqspace

Thanks!

On 4/26/2023 at 9:41 AM, ellipon said:

Hi @tuanphan ! 

Working in 7.1

Have tried the above code and some others floating around the internet and can't seem to get the transparent background to work (fixed footer works no problem). Any thoughts? 

site url: https://ukulele-chiton-zbz6.squarespace.com/
pass: sqspace

Thanks!

Change last code

body.homepage footer.sections section, body.homepage footer.sections .section-background {
    background: transparent;
}

to this

body.homepage footer.sections section, body.homepage footer.sections .section-background, body.homepage footer.sections .section-border  {
    background: transparent !important;
}