My background is not positioned correctly in mobile view

Hello,

Thanks for the excellent question, I’m sorry the background image isn’t working the way you need it to.

 I tested the site you mentioned in your WordPress.org post and it looks like the issue was related to the theme overriding your custom CSS. Here’s the code I found to work:

@media (max-width: 991px) {
    body.custom-background {
        background-size: 100vw !important;
        background-position: center !important;
    }
}

That will make it look like this across different view widths:

As for reducing the size of the area so that it’s only high enough for the buttons, it actually looks like your call-to-action widget has a stray paragraph above the buttons, containing only a single period ( . ) character. If you edit your call-to-action widget and switch from the visual editor to the code editor, look for the tag that looks like this:

<p style="margin-bottom: 80px;">.</p>

Deleting that paragraph will make it look like this:

If you do decide to go with a solid color for smaller screens, just make sure to add the

!important

tag to any CSS rule you use, so that it doesn’t get overridden by the theme.