Make footer stay at bottom of site unless site content goes past vertical window size

Footer misbehaving due to tall window: https://ibb.co/JH3rCdB

Footer behaving properly due to short window: https://ibb.co/wCRnb8p

TL;DR: These images show exactly what's going wrong.

Essentially, I have a footer for a website I'm developing that consists of an image and some text contained in a div. The image width is 100%, it's a gradient fade (black to transparent), the text is centered with text-align: center.

I don't want the footer to always be at the bottom of the browser window, which I could just do with position: fixed. If the window is not that tall, the footer should only be visible when the user scrolls all the way down. This is working fine.

The problem is when a user's browser window is very tall. The footer is then visible right under the site content, and then there's a gap between the footer and the bottom of the window.

How do I solve this?

Position: fixed is not what I want, and Position: sticky with bottom: 0px doesn't work right.