Force Kajabi background image to always fit

Question

Okay, I realize this is a common question, but I can't seem to solve it within Kajabi.

I have a background hero image that I'd like to always have fit without cutting off any portion.

Unfortunately, I can't seem to get it to work correctly without distorting.

Here's what I've got so far:

URL: https://larockstarcreative.mykajabi.com/

.background-image--1523373811158 {
    url(https://kajabi-storefronts-production.global.ssl.fastly.net/kajabi-storefro…ion/themes/421005/settings_images/0mFPfSEYTiGurjJOLMNx_heytherebanner1.png);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: center center;
}

Is there a way to have it always scale to 100% width AND resize to the appropriate height WITHOUT cutting off the top or the bottom?

/newb

EDIT: Okay, by using the style rules below, I've prevented it from cutting off the top or the bottom. However, it's still not stretching to fill the page:

.background-image--1523373811158 {
        overflow-y: hidden ! important;
        overflow-x: hidden ! important;
        background-size: contain;
        background-repeat: no-repeat;  
}

EDIT: It seems to be related to removing the headline and body copy that's typically populated in Kajabi's "hero block." By setting the child column size to a min-height of 160px, I've gotten closer.

Here's the latest:

.background-image--1523373811158 .col-sm-8 { min-height: 160px; }

.background-image--1523373811158 {
    overflow-y: hidden ! important;
    overflow-x: hidden ! important;
    background-size: contain;
    background-repeat: no-repeat;
}

Answer 1

Okay, finally solved it after trying a number of different approaches and using Chrome inspect incessantly.

The missing piece was left and right padding rules that Kajabi applied at some screen sizes.

Below are the style rules I added. Note this is NOT a solution for those who are building from scratch, but rather those that run into the same problem specifically with Kajabi.

<style>
.section--1523373811158 { background-color: transparent; }

@media (min-width: 2281px) {
    .section--1523373811158 { padding: 400px 0; }
}

@media (max-width: 2280px) and (min-width: 1991px) {
    .section--1523373811158 { padding: 300px 0; }
}

@media (max-width: 1990px) and (min-width: 1676px) {
    .section--1523373811158 { padding: 250px 0; }
}

@media (max-width: 1675px) and (min-width: 1280px) {
    .section--1523373811158 { padding: 200px 0; }
}

@media (max-width: 767px) and (min-width: 670px) {
    .section--1523373811158 { padding: 45px 0; }
}

.background-image--1523373811158 .col-sm-8 { min-height: 160px; }

.background-image--1523373811158 {
    overflow-y: hidden ! important;
    overflow-x: hidden ! important;
    background-size: contain;
    background-repeat: no-repeat;
}
</style>