Making the footer fixed to the browser window?

Site URL: https://imnotascientist.com

I'm not sure if I worded the title correctly; I'm trying to take this image that's currently in the footer and make it fixed to the bottom of the browser window, so it spans the page completely and stays on the screen as you scroll, and appears on every page

Password for the site is: missingno

Here's how it currently looks in the attached screenshot.

Right now I have an un-linked page www.imnotascientist.com/png-assets which I'm using for some code another user wrote for the nav bar icons. I figured I can take the image out of the footer container, put it on that page, and use some CSS in the site design to make it a fixed image, right? Because I already have some text on the footer underneath it, I'd actually like to keep the text in the footer exactly as it sits. It's just that start-bar image I want to work with

I found some threads on this forum related to this but none of the code seemed to work

Add to Design > Custom CSS

/* Image bottom bar */
div#block-yui_3_17_2_1_1622715638108_6833 {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    margin-bottom: 0;
    padding-bottom: 0;
    padding-left: 0;
}

15 hours ago, tuanphan said:

Add to Design > Custom CSS

/* Image bottom bar */
div#block-yui_3_17_2_1_1622715638108_6833 {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    margin-bottom: 0;
    padding-bottom: 0;
    padding-left: 0;
}

 

Hi @tuanphan thanks; so I put it in design>custom CSS and it works on the homepage, but doesn't appear on others, even if I add the image as a block to those pages or try putting the code in individual pages

Is there a way I can tweak that code so instead of using the block at the bottom of the page, it just references the image directly from the link on the hidden assets page?

This is the URL to the image itself after doing rightclick-> view image. I think if I just replace that "block" in the code with an HTML link, it would apply to all pages, since it's not referencing the bottom block on a single page, right? Not sure what code I'd need specifically to do so

I've also noticed, on mobile, there seems to be a gap between the image and the bottom of the browser window, attached in screenshot

Thanks so much for the help on this 🙂

https://images.squarespace-cdn.com/content/v1/57a8d77c440243645807eb72/1623172204565-CR3ZT4PVTVMZ98EDPOCM/ke17ZwdGBToddI8pDm48kJVueEqCqkKVN20nWOwcc0dZw-zPPgdn4jUwVcJE1ZvWQUxwkmyExglNqGp0IvTJZcY1lis3u7ujHaqKviAjfgBXb2P7ACMlJX44aBDLb--x26Vnom-qD4cuFrC9uHbiIEi1h0mXlgIPeJqw4nIAgai9OflExw4ZUr3LhjcKhR9_/taskbar+footer.png?format=2500w

The current image is on homepage, so it will appear on homepage only.

To make it appear on entire site, you need add an image block on footer, then we will adjust code to make it fixed at bottom of screen

@tuanphan Wondering about something similar for a client site.

We want the image slideshow to be full-screen regardless of the browser size, without any scrolling. We have this working for some screen sizes, but not if the screen gets taller or smaller. 

We also want the scrolling banner to stick to the bottom of the homepage regardless of browser size. Currently the scrolling banner is a block in a section of the homepage (same section as the slideshow). We could potentially move it to footer if that is helpful, though not sure we want it to appear on every page.

https://goose-ferret-j3rk.squarespace.com/

pw: smalls

Thanks in advance for any help!

On 2/3/2023 at 9:33 PM, melmotz said:

@tuanphan Wondering about something similar for a client site.

We want the image slideshow to be full-screen regardless of the browser size, without any scrolling. We have this working for some screen sizes, but not if the screen gets taller or smaller. 

We also want the scrolling banner to stick to the bottom of the homepage regardless of browser size. Currently the scrolling banner is a block in a section of the homepage (same section as the slideshow). We could potentially move it to footer if that is helpful, though not sure we want it to appear on every page.

https://goose-ferret-j3rk.squarespace.com/

pw: smalls

Thanks in advance for any help!

Don't remove any code in your current code.

Add this to Design > Custom CSS
 

article section:first-child {
    height: calc(~"100vh - 174px") !important;
}
.fe-block-2d2f0fafb27928d18387 {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
}

@tuanphan thank you so much, that works for the homepage, but it skews the interior image backgrounds/content up to be blocked by header. It works fine if I delete the first portion of the code you mentioned. Is it ok to use it without the  article section:first-child piece?

Do you know how to get the background image/slideshow to be cropped into the full size of the browser without any scrolling? It is working on standard desktop sizes, but as the browser gets taller or narrower, a lavender band appears between the image and the scrolling banner.