Hero Widget – Scale responsive background image in full-width stretched row

Hi-

I am working on a new front page using the Vantage free theme. It is in draft, unpublished form.

I constructed the page with a single row SiteOrigin Layout Builder Widget that contains a single row SiteOrigin Hero Widget. The row layout for both widget rows is “full width stretched.” “Widget Styles” for both rows, and also for both widgets within the rows, are default.

The Hero Widget contains one frame with centered text and a single background image (original size 5184px x 3456px). The background image settings are:

size – full
type – cover
top and bottom padding – 300px
side padding – 20px
max container width – 1280px.
other settings for frame – default

ISSUE:

The background image is a full face closeup. At full width, the image gets cropped top and bottom, with the top of the forehead disappearing behind the header (which looks ok), and with the entire mouth disappearing behind the footer (which is not ok). In short, although responsive, it doesn’t scale as the page is widened for a computer screen. Reducing the page for iPhone or iPad view is marginally better because the image height doesn’t change – only the width changes (so the mouth isn’t covered by the footer).

How can I make the image scale as the page is widened for a computer screen like a MBPro or iMac, and still keep the image “responsive” for small screen size changes? Perhaps there is another way for the background image to be full width on the page (i.e., no borders or box) other than setting the rows to “full-width stretched?” I notice that the image also distorts slightly as it is widened (although that is acceptable).

I am happy to add you as a user since the page isn’t published.

Thanks