Background image issues.

Hey jkos,
When you set the background image to Scale to fit it scales image, so the whole image is always visible, this includes the height. Which is why the image does not reach the sides.
At Stretch to fit it stretches the image width to cover the page, less the 50px padding that the page has by default.
The height of your column is not set so the content is determining the height, but you have little content so the whole background image is not shown. If you set the column height to 150% then it will show.
But I recommend trying the color section instead because the background image will then be full width. I created a test page linked below to demonstrate.
Since the color section wants to vertically center the content, I added this css to the bottom of the page so your content will be higher:

.responsive #top #wrap_all .avia-section.av-minimum-height-99vw .container {
    display: flex;
    justify-content: center;
    margin-top: 15%;
    max-width: fit-content;
}

The reason your text is off the screen for mobile is because your text has 800px padding, which is larger than a mobile screen:

to correct this you could change it to a percentage, or for this I created a css grid for two columns to achieve the layout without padding, and on mobile the grid is stacked. See the test page below.
For others, this is the HTML for the two columns:

<div class="parent">
<div class="div1"> first column text </div>
<div class="div2"> second column text </div>
</div>

and this is the css:

@media screen and (max-width: 789px) {
  .parent{
      grid-template-columns: 1fr;
      grid-template-rows: 1fr;
   }
}
@media screen and (min-width: 790px) {
.parent {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 0px;
grid-row-gap: 0px;
}

.div1 { grid-area: 1 / 1 / 2 / 2; }
.div2 { grid-area: 1 / 2 / 2 / 3; }
}

Best regards,
Mike

Hi,
Glad to hear that you have this sorted out, shall we close this thread then?

Best regards,
Mike