Kartra Fixed (Non-Scrolling) Membership Background

<!--
You do NOT need to include this comment block. Copy and paste from the <p> paragraph below.
Replace the background-image URL with the storage location of your image. The image will be scaled to fit the width of the screen/window.
Change the second background-position % between 0% (to anchor the top of the image to the top of the window) and 100% (to anchor the bottom of the image to the bottom of the window).
The code block should be at the top (or at least not last) and will be hidden in preview and live.
Note: Some browsers do not honor fixed backgrounds and will scroll them (e.g. Safari mobile).
-->

<!-- The following label is an editing aid and will not appear in live -->
<p>Background Image</p><!-- membership-background-color-image -->
<script>
if ('app.kartra.com' !== location.hostname) document.currentScript.parentElement.parentElement.style.display = 'none';
</script>
<style>
body::before {
content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
background-color: inherit; opacity: 1.0;
background-image: url("https://d1aettbyeyfilo.cloudfront.net/kcsg/unsplash_1581286117.jpg"); /* 16w:9h image */
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100vw; /* default: scale to viewport width; crop T/B */
background-position: 50% 100%;
}
@media (min-height: 56.25vw) { /* Adjust if not 16w:9h image */
    /* If viewport height:width exceeds 9:16, scale to viewport height; crop L/R */
    body::before { background-size: auto 100vh; }
}
</style>